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

相关文章

SQL Server 查询数据库及数据文件大小的方法

《SQLServer查询数据库及数据文件大小的方法》文章介绍了查询数据库大小的SQL方法及存储过程实现,涵盖当前数据库、所有数据库的总大小及文件明细,本文结合实例代码给大家介绍的非常详细,感兴趣的... 目录1. 直接使用SQL1.1 查询当前数据库大小1.2 查询所有数据库的大小1.3 查询每个数据库的详

MySQ中出现幻读问题的解决过程

《MySQ中出现幻读问题的解决过程》文章解析MySQLInnoDB通过MVCC与间隙锁机制在可重复读隔离级别下解决幻读,确保事务一致性,同时指出性能影响及乐观锁等替代方案,帮助开发者优化数据库应用... 目录一、幻读的准确定义与核心特征幻读 vs 不可重复读二、mysql隔离级别深度解析各隔离级别的实现差异

Java实现本地缓存的四种方法实现与对比

《Java实现本地缓存的四种方法实现与对比》本地缓存的优点就是速度非常快,没有网络消耗,本地缓存比如caffine,guavacache这些都是比较常用的,下面我们来看看这四种缓存的具体实现吧... 目录1、HashMap2、Guava Cache3、Caffeine4、Encache本地缓存比如 caff

Java 中编码与解码的具体实现方法

《Java中编码与解码的具体实现方法》在Java中,字符编码与解码是处理数据的重要组成部分,正确的编码和解码可以确保字符数据在存储、传输、读取时不会出现乱码,本文将详细介绍Java中字符编码与解码的... 目录Java 中编码与解码的实现详解1. 什么是字符编码与解码?1.1 字符编码(Encoding)1

Python Flask实现定时任务的不同方法详解

《PythonFlask实现定时任务的不同方法详解》在Flask中实现定时任务,最常用的方法是使用APScheduler库,本文将提供一个完整的解决方案,有需要的小伙伴可以跟随小编一起学习一下... 目录完js整实现方案代码解释1. 依赖安装2. 核心组件3. 任务类型4. 任务管理5. 持久化存储生产环境

Python批量替换多个Word文档的多个关键字的方法

《Python批量替换多个Word文档的多个关键字的方法》有时,我们手头上有多个Excel或者Word文件,但是领导突然要求对某几个术语进行批量的修改,你是不是有要崩溃的感觉,所以本文给大家介绍了Py... 目录工具准备先梳理一下思路神奇代码来啦!代码详解激动人心的测试结语嘿,各位小伙伴们,大家好!有没有想

Python如何调用另一个类的方法和属性

《Python如何调用另一个类的方法和属性》在Python面向对象编程中,类与类之间的交互是非常常见的场景,本文将详细介绍在Python中一个类如何调用另一个类的方法和属性,大家可以根据需要进行选择... 目录一、前言二、基本调用方式通过实例化调用通过类继承调用三、高级调用方式通过组合方式调用通过类方法/静

java -jar example.jar 产生的日志输出到指定文件的方法

《java-jarexample.jar产生的日志输出到指定文件的方法》这篇文章给大家介绍java-jarexample.jar产生的日志输出到指定文件的方法,本文给大家介绍的非常详细,对大家的... 目录怎么让 Java -jar example.jar 产生的日志输出到指定文件一、方法1:使用重定向1、

Java报错:org.springframework.beans.factory.BeanCreationException的五种解决方法

《Java报错:org.springframework.beans.factory.BeanCreationException的五种解决方法》本文解析Spring框架中BeanCreationExce... 目录引言一、问题描述1.1 报错示例假设我们有一个简单的Java类,代表一个用户信息的实体类:然后,

Linux查询服务器系统版本号的多种方法

《Linux查询服务器系统版本号的多种方法》在Linux系统管理和维护工作中,了解当前操作系统的版本信息是最基础也是最重要的操作之一,系统版本不仅关系到软件兼容性、安全更新策略,还直接影响到故障排查和... 目录一、引言:系统版本查询的重要性二、基础命令解析:cat /etc/Centos-release详