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

相关文章

检查 Nginx 是否启动的几种方法

《检查Nginx是否启动的几种方法》本文主要介绍了检查Nginx是否启动的几种方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学... 目录1. 使用 systemctl 命令(推荐)2. 使用 service 命令3. 检查进程是否存在4

Java方法重载与重写之同名方法的双面魔法(最新整理)

《Java方法重载与重写之同名方法的双面魔法(最新整理)》文章介绍了Java中的方法重载Overloading和方法重写Overriding的区别联系,方法重载是指在同一个类中,允许存在多个方法名相同... 目录Java方法重载与重写:同名方法的双面魔法方法重载(Overloading):同门师兄弟的不同绝

MySQL字符串转数值的方法全解析

《MySQL字符串转数值的方法全解析》在MySQL开发中,字符串与数值的转换是高频操作,本文从隐式转换原理、显式转换方法、典型场景案例、风险防控四个维度系统梳理,助您精准掌握这一核心技能,需要的朋友可... 目录一、隐式转换:自动但需警惕的&ld编程quo;双刃剑”二、显式转换:三大核心方法详解三、典型场景

MySQL快速复制一张表的四种核心方法(包括表结构和数据)

《MySQL快速复制一张表的四种核心方法(包括表结构和数据)》本文详细介绍了四种复制MySQL表(结构+数据)的方法,并对每种方法进行了对比分析,适用于不同场景和数据量的复制需求,特别是针对超大表(1... 目录一、mysql 复制表(结构+数据)的 4 种核心方法(面试结构化回答)方法 1:CREATE

详解C++ 存储二进制数据容器的几种方法

《详解C++存储二进制数据容器的几种方法》本文主要介绍了详解C++存储二进制数据容器,包括std::vector、std::array、std::string、std::bitset和std::ve... 目录1.std::vector<uint8_t>(最常用)特点:适用场景:示例:2.std::arra

springboot中配置logback-spring.xml的方法

《springboot中配置logback-spring.xml的方法》文章介绍了如何在SpringBoot项目中配置logback-spring.xml文件来进行日志管理,包括如何定义日志输出方式、... 目录一、在src/main/resources目录下,也就是在classpath路径下创建logba

解决idea启动项目报错java: OutOfMemoryError: insufficient memory

《解决idea启动项目报错java:OutOfMemoryError:insufficientmemory》:本文主要介绍解决idea启动项目报错java:OutOfMemoryError... 目录原因:解决:总结 原因:在Java中遇到OutOfMemoryError: insufficient me

SQL Server中行转列方法详细讲解

《SQLServer中行转列方法详细讲解》SQL行转列、列转行可以帮助我们更方便地处理数据,生成需要的报表和结果集,:本文主要介绍SQLServer中行转列方法的相关资料,需要的朋友可以参考下... 目录前言一、为什么需要行转列二、行转列的基本概念三、使用PIVOT运算符进行行转列1.创建示例数据表并插入数

maven异常Invalid bound statement(not found)的问题解决

《maven异常Invalidboundstatement(notfound)的问题解决》本文详细介绍了Maven项目中常见的Invalidboundstatement异常及其解决方案,文中通过... 目录Maven异常:Invalid bound statement (not found) 详解问题描述可

C++打印 vector的几种方法小结

《C++打印vector的几种方法小结》本文介绍了C++中遍历vector的几种方法,包括使用迭代器、auto关键字、typedef、计数器以及C++11引入的范围基础循环,具有一定的参考价值,感兴... 目录1. 使用迭代器2. 使用 auto (C++11) / typedef / type alias