浏览器兼容 - zzwind's Blog

ie6 position relative

<style type="text/css">
#div1{position:relative;text-align:center;}
#div2{position:absolute;left:0;top:0;}
</style>
<div id="#div1">
  <div id="#div2">
     zzzzzzz
  </div>
</div>

这个时候#div2 在IE6下也会居中显示

只要给#div1 加上width:100%;

#div2 就会乖乖的去左上的位置了

IE6 Doubled Float-Margin Bug（空白边加倍）

<!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类别的元素），因此该方案不会有对原来的布局有任何影响。