网页制作

IE6,IE7浏览器下 margin 无效的解决方法
网页制作 2024/11/15 佚名
3 2
只能设置父元素的padding-top;来达到效果。看下面的演示代码；

　　今天有时间，所以特意做了一个测试。

复制代码代码如下:
<style type="text/css">
.test-1,.test-2{border:5px solid #F00;}
.test-1{border-color:#000;}
　　　　　　　/*width:100%; height:auto !important;height:1%; zoom:1;*/
.test-2{margin:10px;height:50px;width:500px;}
</style>
<div class="test-1">
<div class="test-2">
test-2
</div>
</div>

IE6,IE7浏览器下 margin 无效的解决方法

IE6,IE7浏览器下 margin 无效的解决方法
呵呵，我标题没错吧。果然IE6,IE7的margin:10px; 失效了。
解决办法

复制代码代码如下:
.test-1{border-color:#000;width:100%; height:auto !important;height:1%; zoom:1;}

使用：width:100%;或者 height:auto !important;height:1%; 或者zoom:1; 都可以解决上面的问题。（3选1，不要全部写进去。）

根据自己的具体情况来选择一种即可！

问题根源

　　当然知道了解决办法还不够，我们必须知道什么情况会引发上面的BUG，zoom:1;这东西貌似经常使用。于是我去查询了一下关于zoom的一些信息。

发现他会触发IE的 haslayout ; haslayout来解决一些常见的IE BUG；（建议不太明白 haslayout 的同学点击连接去读一下。haslayout 不神秘。）

　　在InternetExplorer中，一个元素要么自己对自身的内容进行计算大小和组织，要么依赖于父元素来计算尺寸和组织内容

　　上面这句加粗的话很重要哦。

　　上面的例子 test-1 没有触发  haslayout 他不能负责对自己和可能的子孙元素进行尺寸计算和定位；所以子元素的margin失效。

　　当然 激活 haslayout 的方式很多 zoom:1; 其实设置 widht height 也可以激活。所以当设置了 这两个值。子元素定位也正确了。

 以上仅个人根据网上的资料得到的结论，如果有错误，还请高人指点。

罪恶的IE 浏览器何时退出舞台。

标签：
margin,无效
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
岱庙资源网 Copyright www.zgmyg.com

评论“IE6,IE7浏览器下 margin 无效的解决方法”

暂无“IE6,IE7浏览器下 margin 无效的解决方法”评论...
www.zgmyg.com 岱庙资源网
129,905影音资源
244,626技术资源
111,817软件资源
578,645站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
岱庙资源网 Copyright www.zgmyg.com