IE overflow:hidden失效的解决方法

2024-06-04 03:58

本文主要是介绍IE overflow:hidden失效的解决方法,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

position和float是两种布局模式,在IE6下共用有时会导致用position定位的元素节点消失。绝对定位的元素节点是参照离它最近的已定位元素,所以父节点定位relative、子节点定位absolute是很常见的。


overflow:hidden失效
当父元素的直接子元素或者下级子元素的样式拥有position:relative属性时,父元素的overflow:hidden属性就会失效。
我们在IE 6内发现子元素会超出父元素设定的高度,即使父元素设置了overflow:hidden。
解决这个bug很简单,在父元素中使用position:relative;即可解决该bug

我的办法:子元素设置绝对定位,父元素相对定位,这样overflow:hidden就不会失效了。

IE下CSS溢出隐藏失败(IE overflow:hidden失效)

html代码:

服务范围品牌官网设计设计、策划、制作全方位周边产品让你省心的一条龙服务。充分了解企业文化、行业特点,体现企业特色。 设计师一对一沟通,充分了解你的需求和想法。 时刻掌握最新技术动向,打造高品质网站。专业量身定制开发,定制设计、定制功能。拥有一支资深开发工程师团队,追求质量同时保证速度。追求完美,不断提升系统响应速度和稳定性。完善的测试流程,在上线之前解决问题商城网站建设手机、微信网站建设个性设计,独一无二,用设计风格体现企业文化。精简代码、追求速度,兼容主流手机浏览器。和PC端数据同步,管理方便,全方位网络营销。零成本增加微信网站。其他网站定制旅游官网、旅游平台等网站定制外贸网站、外贸商城等网站定制门户网站、教育平台等网站定制内部管理系统等其他网站定制站内优化如同打地基,地基不稳,网站怎能推广成功合理配置网站标题、关键词、描述优化页面代码,利于搜索引擎抓取网站地图、robots设置、404错误设置SEO基础优化域名服务个性设计,独一无二,用设计风格体现企业文化。精简代码、追求速度,兼容主流手机浏览器。和PC端数据同步,管理方便,全方位网络营销。零成本增加微信网站

ul的宽度为2000,而他的父级div设置的宽度为1000,并且设置了overflow:hidden,但是在ie中多出来的ul部分并没有被隐藏掉。

原因是我的li元素加了定位,position:relative,解决办法是在父节点容器 中也加一个position:relative。在#con的div中也加上position:relative,问题得到解决。


我的css代码:

div#scope_con div#con{width:1000px;height: auto;overflow: hidden;margin:30px auto;border: solid 1px red;position: relative;}
div#scope_con div#con ul{width:2000px;overflow: hidden;border:solid 1px green;}
div#scope_con div#con li{list-style: none;float: left;width: 333px;height: 400px;background:#d04d43;position: relative;}
div#scope_con div#con li img{width: 333px;height:200px;border:0px;}
div#scope_con div#con li#sc img,div#scope_con div#con li#yh img{margin-top:40px}

这篇关于IE overflow:hidden失效的解决方法的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


原文地址:
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.chinasem.cn/article/1029001

相关文章

Linux换行符的使用方法详解

《Linux换行符的使用方法详解》本文介绍了Linux中常用的换行符LF及其在文件中的表示,展示了如何使用sed命令替换换行符,并列举了与换行符处理相关的Linux命令,通过代码讲解的非常详细,需要的... 目录简介检测文件中的换行符使用 cat -A 查看换行符使用 od -c 检查字符换行符格式转换将

SpringBoot实现数据库读写分离的3种方法小结

《SpringBoot实现数据库读写分离的3种方法小结》为了提高系统的读写性能和可用性,读写分离是一种经典的数据库架构模式,在SpringBoot应用中,有多种方式可以实现数据库读写分离,本文将介绍三... 目录一、数据库读写分离概述二、方案一:基于AbstractRoutingDataSource实现动态

Java中的String.valueOf()和toString()方法区别小结

《Java中的String.valueOf()和toString()方法区别小结》字符串操作是开发者日常编程任务中不可或缺的一部分,转换为字符串是一种常见需求,其中最常见的就是String.value... 目录String.valueOf()方法方法定义方法实现使用示例使用场景toString()方法方法

Java中List的contains()方法的使用小结

《Java中List的contains()方法的使用小结》List的contains()方法用于检查列表中是否包含指定的元素,借助equals()方法进行判断,下面就来介绍Java中List的c... 目录详细展开1. 方法签名2. 工作原理3. 使用示例4. 注意事项总结结论:List 的 contain

macOS无效Launchpad图标轻松删除的4 种实用方法

《macOS无效Launchpad图标轻松删除的4种实用方法》mac中不在appstore上下载的应用经常在删除后它的图标还残留在launchpad中,并且长按图标也不会出现删除符号,下面解决这个问... 在 MACOS 上,Launchpad(也就是「启动台」)是一个便捷的 App 启动工具。但有时候,应

SpringBoot日志配置SLF4J和Logback的方法实现

《SpringBoot日志配置SLF4J和Logback的方法实现》日志记录是不可或缺的一部分,本文主要介绍了SpringBoot日志配置SLF4J和Logback的方法实现,文中通过示例代码介绍的非... 目录一、前言二、案例一:初识日志三、案例二:使用Lombok输出日志四、案例三:配置Logback一

Python实现无痛修改第三方库源码的方法详解

《Python实现无痛修改第三方库源码的方法详解》很多时候,我们下载的第三方库是不会有需求不满足的情况,但也有极少的情况,第三方库没有兼顾到需求,本文将介绍几个修改源码的操作,大家可以根据需求进行选择... 目录需求不符合模拟示例 1. 修改源文件2. 继承修改3. 猴子补丁4. 追踪局部变量需求不符合很

Spring事务中@Transactional注解不生效的原因分析与解决

《Spring事务中@Transactional注解不生效的原因分析与解决》在Spring框架中,@Transactional注解是管理数据库事务的核心方式,本文将深入分析事务自调用的底层原理,解释为... 目录1. 引言2. 事务自调用问题重现2.1 示例代码2.2 问题现象3. 为什么事务自调用会失效3

mysql出现ERROR 2003 (HY000): Can‘t connect to MySQL server on ‘localhost‘ (10061)的解决方法

《mysql出现ERROR2003(HY000):Can‘tconnecttoMySQLserveron‘localhost‘(10061)的解决方法》本文主要介绍了mysql出现... 目录前言:第一步:第二步:第三步:总结:前言:当你想通过命令窗口想打开mysql时候发现提http://www.cpp

Mysql删除几亿条数据表中的部分数据的方法实现

《Mysql删除几亿条数据表中的部分数据的方法实现》在MySQL中删除一个大表中的数据时,需要特别注意操作的性能和对系统的影响,本文主要介绍了Mysql删除几亿条数据表中的部分数据的方法实现,具有一定... 目录1、需求2、方案1. 使用 DELETE 语句分批删除2. 使用 INPLACE ALTER T