IE6 Doubled Float-Margin Bug(空白边加倍) - zzwind's Blog

IE6 Doubled Float-Margin Bug(空白边加倍)

zzwind posted @ 2010年8月13日 17:25 in 浏览器兼容 , 1430 阅读

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>Untitled Document</title>
        <style>
            #c{
                width:400px;
                height:300px;
                border:2px solid red;
                margin:100px;
                margin-bottom:0px;
               
            }
            .f{
                float:left;
                margin:20px;
                width:100px;
                height:100px;
                border:2px solid black;
                display:inline;
            }
        </style>
    </head>
    <body>
        <div id="c">
            <div class="f" id="s1"></div><div class="f" id="s2"></div>
        </div>           
    </body>
</html>

现象描述:
在IE7,FF3中浏览该页面发现s1和c之间的距离是20px(与预期相同),s1和s2之间的间距也是40px(与预期相同);而在IE6中浏览该页面发现s1和c之间的距离是40px(距离翻倍了),s1和s2之间的间距是40px(与预期相同)。

现象分析:
1. s1和s2之间没有发生空白边叠加效应是因为s1和s2都是浮动元素,而空白边叠加效应是不会再浮动元素之间生效的;
2. 在IE6中s1和c之间的距离预期是20px,但结果是40px,是预期的两倍,视为IE6 BUG。

得出的结论:
IE6中与容器(示例中为c)相邻的浮动元素(示例中为s1)空白边会翻倍;但是浮动元素之间空白边表现正常(s1和s2之间的间距是40px,不是 60px或者80px);同时发生空白边翻倍的那条边应该与浮动方向相同,例如如果是float:left,那么就是margin-left空白边翻倍, 但margin-right表现正常。

解决办法:
对于浮动元素添加一个CSS属性display:inline即可

解决方案分析:

对于设置了float属性(及其必须是left或者right)的元素将会变成block元素,不管设置浮动属性的元素原来是inline还是block,因此给浮动元素添加display:inline样式是不会带来任何负面效应的。浏览器会忽略该属性(设置了float属性的元素必然是block类别的元素),因此该方案不会有对原来的布局有任何影响。

 

 

 

Avatar_small
NCERT Economics Samp 说:
2022年9月28日 15:13

Every 6th Standard student can download NCERT Economics Sample Paper 2023 Class 6 and study to know the examination pattern and to get ready to write an exam fearlessly for all formats of exams such as SA1, SA2, NCERT Economics Sample Paper Class 6 FA1, FA2, FA3, FA4 and Assignments. The teaching staff of the school and various institutional experts have suggested the NCERT STD-6 Economics Question Bank 2023 for all lessons and all topic most important questions which have been repeatedly asked in previous exams.


登录 *


loading captcha image...
(输入验证码)
or Ctrl+Enter
Host by is-Programmer.com | Power by Chito 1.3.3 beta | © 2007 LinuxGem | Design by Matthew "Agent Spork" McGee