【css】ie6 和 ie7 下 position 与 overflow 的问题

前几天做的项目中碰到这样一个问题,在 ie6 和 ie7 下,给父元素设置 overflow:hidden 不起作用无法隐藏,后来发现是子元素中有设置 position:relative,如果子元素删除 position:relative,那么父元素的 overflow:hidden 可以隐藏,具体代码及效果如下:

html 代码:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="renderer" content="webkit"/>
    <meta name="keywords" content=""/>
    <meta name="description" content=""/>
    <title>Document</title>
    <style>
    *{margin:0;padding:0;}
    .w{width:480px;margin:50px auto;}
    .w ul{width:100%;overflow:hidden;height:144px;border:1px solid #f00;}
    .w li{position:relative;height:36px;width:108px;border:1px solid #d1d1d1;line-height:36px;text-align:center;float:left;display:inline;margin:0 10px 10px 0;}
    </style>
</head>
<body>
    <div class="w">
        <ul>
            <li>111111111</li>
            <li>222222222</li>
            <li>333333333</li>
            <li>444444444</li>
            <li>555555555</li>
            <li>666666666</li>
            <li>777777777</li>
            <li>888888888</li>
            <li>999999999</li>
            <li>000000000</li>
            <li>111111111</li>
            <li>222222222</li>
            <li>333333333</li>
            <li>444444444</li>
            <li>555555555</li>
            <li>666666666</li>
            <li>777777777</li>
            <li>888888888</li>
            <li>999999999</li>
            <li>000000000</li>
        </ul>
    </div>
</body>
</html>

ie6 和 ie7 下效果:

解决方法:

给父元素设置 position:relative。

时间: 2024-11-05 17:33:48

【css】ie6 和 ie7 下 position 与 overflow 的问题的相关文章

css ie6、ie7、ie8中overflow:hidden无效解决办法

产生原因: 当父元素的直接子元素或者下级子元素的样式拥有position:relative属性时,父元素的overflow:hidden属性就会失效. 解决办法: 我们在IE 6内发现子元素会超出父元素设定的高度,即使父元素设置了overflow:hidden.解决这个bug很简单,在父元素中使用position:relative;即可解决该bug ie7和ie6 发现在ie6和ie7里面overflow:hidden无效,还是会超出外层div 后来在外层div上面加上position:rela

【css】a:hover 设置上下边框在 ie6 和 ie7 下失效

前段时间在写样式的时候发现了这个问题,虽然当时就解决了这个 bug 不过还是记录下,以免再次出现这样的问题. demo 代码: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"/> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"

CSS IE6、7下关于Position的一个bug问题分享

又好久没来了,小码哥甚是想念 想念我的人.由于近期工作中跟CSS打交道较多,所以偶尔会碰到有关它的一些问题,CSS很强大,尤其是后来的CSS3.鄙人正在学习中,如果就所遇到的问题,分析有偏差,望大家海涵哈!!下面就说说我刚刚遇到的一个问题,也许某些前辈大拿们会在心里BS我,不过对我来说,都是收获!嘎嘎,, 总所周知,我们都知道CSS中的定位position属性是一个相当重要和特殊的属性.它分别有一下几个属性值: position:relative; position:absolute; posi

ie6和ie7下z-index bug的解决办法

一.匆匆带过的概念 关于CSS中层级z-index的定义啊什么的不是本文的重点,不会花费过多篇幅详细讲述.这里就简单带过,z-index伴随着层的概念产生的.网页 中,层的概念与photoshop或是flash中层的概念是一致的.熟悉photoshop或是flash的应该知道,层级越高(图层越靠上),越在上 面显示,如果层发生重叠,层级高的会覆盖层级低的,如果非透明或半透明,则会遮挡. 在photoshop中,层的高低就是靠手动调的,鼠标拖拽,或是ctrl+]或是ctrl+shift+[快捷键改

IE6、IE7、IE8中overflow:hidden无效问题

在做图片无缝滚动效果时遇到了这个兼容问题 div宽1000px高250px超出隐藏. 但在Firefox中正常,超出部分隐藏,但是在IE6.IE7.IE8.Sogou高速下都显示了出来.做了这么多年的前端了,第一次发现在这样的问题.实在头疼.一开始单独拿出这段代码发现没有问题,认为是上下影响导致的,但不是,几经波折,发现是设定overflow:hidden层里有定位标签的问题.最后终于搞定. 解决方案: 只需要在设定overflow:hidden层加入定位即可.如在 .album .thumb

关于JSON.parse在ie6,ie7下未定义的issue

情况是这样的: 在ie6下出现一个js error,说是JSON.parse为定义,一查,才知道,ie6,ie7不支持JSON. solution:只要在使用JSON之前加载个json2.js就行了. 参考:http://stackoverflow.com/questions/2503175/json-on-ie6-ie7 json2.js 下载: https://github.com/douglascrockford/JSON-js

querySelector和querySelectorAll在IE6和IE7下的兼容性问题

if (!document.querySelectorAll) {    document.querySelectorAll = function (selectors) {        var style = document.createElement('style'), elements = [], element;        document.documentElement.firstChild.appendChild(style);        document._qsa =

IE6/IE7下position:absolute;绝对定位偏移、不显示问题

其实这个原因是因为IE6/IE7的解析是在position:absolute之后,仍然会按照普通文档流的解析来进行,而要打破这种方式,让它正常工作就需要给它一个定位,具体代码如下:方法一: CSS: html代码: 切记left:0px;必须两个都要写,少写一个都会造成不显示:  方法二:

margin-bottom在IE6和IE7下失效的解决办法

IE6/7下margin-bottom无效一般出现在容器里某元素设置后在父容器内无效,这个时候只需要在父容器中加入以下两句css,基本上所有的浏览器都兼容了: overflow:hidden;zoom:100%;