IE 5.x/Win 和模型bug

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>IEbug</title> 
<style type="text/css"> 
<!-- 
/*default CSS*/ 
body{ text-align:center; font:12px/120% "Courier New", Courier, monospace; color:#000;} 
code{font-family: "Courier New", Courier, monospace; border:1px solid #f60; display:block; padding:8px; margin:3px; background:#fff;} 
span.alt{ color:#c00; font-weight:bold;} 
acronym {cursor: help; font-weight:bold; border-bottom:1px #f90 dashed; color:#c00;} 
a{ color:#0099CC; text-decoration:none;} 
a:hover{ color:#333333; text-decoration:underline;}

#bug1,#bug2,#bug3{ margin-left:auto; margin-right:auto; width:780px; margin-bottom:10px; position:relative;} 
#bug1 div,bug2 div,bug3 div{text-align:left;} 
.wrap{width:500px;width /**/:530px; border:10px #f60 solid; padding:10px; margin:10px auto;} 
html>body .wrap{ width:500px;} 
.wrap *{text-align:left;} 
/* clear float*/ 
.clearfix:after { 
 content: ".";  
 display: block;  
 height: 0;  
 clear: both;  
 visibility: hidden; 
}

.clearfix {display: inline-table;}

/* Hides from IE-mac \*/ 
.clearfix {height: 1%;} 
.clearfix {display: block;} 
/* End hide from IE-mac */ 
.clear{ clear:both;} 
/*bug1*/ 
#bug1{} 
.bugTitle{ position:absolute; left:0px; top:0px; width:100px; font:18px "Courier New", Courier, monospace; font-weight:bold;padding:5px; background:#f5f5f5;} 
#boxbug{ width:500px;width /**/:530px; border:10px #f60 solid; margin:10px auto; padding:10px;} 
#boxbugie6{ width:500px; border:10px #f60 solid; margin:10px auto; padding:10px;} 
html>body #boxbugie6{ width:500px;} 
html>body #boxbug{ width:500px;} 
/*bug2*/ 
#bug2{} 
#ie3px,#ieno3px{float: left; width: 100px; height: auto; min-height:50px; background: #f60;} 
p.ie3px,p.no3px{margin: 0 0 0 100px; background: #333; text-align:left; color:#fff;} 
* html #ieno3px{margin-right:-3px;} 
* html p.no3px{height:1%;margin-left: 0;} 
/*bug3*/ 
#bug3{} 
#box1,#box2{ margin-left:50px; float:left; background:#f60; width:200px;} 
#box2{ /*float:none;*/display:inline ;}

--> 
</style> 
</head>

<body> 
<div id="bug1" class="clearfix"> 
    <a name="bug1"></a> 
    <div class="bugTitle">IE 5.x/Win 和模型bug</div> 
      <div id="boxbug" title="box bug for IE5.x">这里是一个width:500px;margin:10px;padding:10px; border:10px;的一个盒子.
使用widht(空格)/**/:530px，解决IE5.x系列的盒解析bug，因为IE5.x系列浏览器能读到这句.在IE5.x Win，IE6.0 Win下效果一致.
<b>如何使用hack解决IE5.x盒解析bug?</b> 
    <code>#content { 
 
width:530px; //这个是错误的width，所有浏览器都读到了
 
voice-family: "\"}\"";   //IE5.X/win忽略了<span class="alt">"\"}\""</span>后的内容
 
voice-family:inherit;
 
width:500px;   //包括IE6/win在内的部分浏览器读到这句，新的数值(300px)覆盖掉了旧的
 
} 
 
html>body #content {   //<span class="alt">html>body</span>是CSS2的写法
 
width:500px; //支持CSS2该写法的浏览器有幸读到了这一句,IE 5.x不支持的。
 
} </code> 
<code>#content { 
 
width:500px !important;   //这个是正确的width，大部分支持!important标记的浏览器使用这里的数值
 
width(空格)/**/:530px;   //IE6/win不解析这句，所以IE6/win仍然认为width的值是300px；而IE5.X/win读到这句，新的数值(400px)覆盖掉了旧的，因为!important标记对他们不起作用
 
} 
 
html>body #content { //<span class="alt">html>body</span>是CSS2的写法
 
width:500px;   //支持CSS2该写法的浏览器有幸读到了这一句
 
} </code> 
<code>
 
</code> 
    </div> 
    <div id="boxbugie6">这里是一个width:500px;margin:10px;padding:10px; border:10px;的一个盒子，IE5.x Win解析不正常。
IE6盒模型在向后兼容的同时也包容了以前的错误，IE6其实有两个核心，在旧的页面前他仍旧表现出对错误的宽容，只有在文档中严格地加上文档类型(<acronym>DOCTYPE</acronym>)声明，IE6才能够接受正确的box-model所以，hack必须和正确的DOCTYPE同时包含在文档中才能够正常工作。</div> 
</div>

<div id="bug2" class="clearfix"> 
    <a name="bud2"></a> 
    <div class="bugTitle">IE/div浮动文本出现3px间距的bug</div> 
    <div class="wrap clearfix"> 
        <div id="ie3px"> 
          <p>这里是浮动box</p> 
          <p> </p> 
          <p> </p> 
        </div> 
        <p class="ie3px">左边对象是浮动的，这里是采用margin-left来定位，这里的文本会离左边有3px的空白误差。</p> 
  </div> 
    <div class="wrap clearfix"> 
        <div id="ieno3px">这里是浮动box,使用了<span class="alt">* html #floatbox2 {margin-right: -3px;}</span>解决3px bug</div> 
        <p class="no3px">左边对象是浮动的，这里是采用<span class="alt">* html p.no3px{height:1%;margin-left: 0;}</span>，这里的文本会离左边没有了3px的空白误差。</p> 
      </div> 
  <div class="wrap"> 
        <p><strong>IE/div浮动文本出现3px间距的bug产生的条件:</strong>
 
            当左边对象是浮动的，右边对象采用外补丁的左边距(margin-left:?px;)来定位，则右边对象内的文本会离左边有3px的空白误差。 
        </p> 
        <strong>CSS:</strong> 
        <code>#ie3px{float: left; width: 100px; height: 50px; background: #f60;}/*左边对象浮动*/
 
    p.ie3px{margin: 0 0 0 100px; background: #333; text-align:left; color:#fff;}/*右边margin-left:??px;*/     
        </code> 
        <strong>XHTML:</strong> 
        <code><div id="ie3px">这里是浮动box</div>
 
<p class="ie3px">左边对象是浮动的，这里是采用margin-left来定位，这里的文本会离左边有3px的空白误差。</p> 
        </code> 
    <p><strong>IE/div浮动文本出现3px间距的bug解决方法:</strong>
 
      利用hack <span class="alt">*html div{}</span>为IE单独写一个样式</p> 
        <code>* html #ieno3px{margin-right:-3px;}
 
    * html p.no3px{height:1%;margin-left: 0;}</code> 
        <strong>CSS:</strong> 
        <code>#ieno3px{float: left; width: 100px; height: 50px; background: #f60;}
 
        p.no3px{margin: 0 0 0 100px; background: #333; text-align:left; color:#fff;}
 
        * html #ieno3px{margin-right:-3px;}
 
        * html p.no3px{height:1%;margin-left: 0;}</code> 
        <strong>XHTML:</strong> 
        <code><div id="ieno3px">这里是浮动box,使用了<span class="alt">* html #floatbox2 {margin-right: -3px;}</span>解决3px bug</div>
 
<p class="no3px">左边对象是浮动的，这里是采用<span class="alt">* html p.no3px{height:1%;margin-left: 0;}</span>，这里的文本会离左边没有了3px的空白误差。</p></code> 
  </div> 
</div>

<div id="bug3"> 
    <a name="bug3"></a> 
    <div class="bugTitle">IE/浮动对象外补丁的双倍距离</div> 
    <div class="wrap clearfix"> 
        <div id="box1">这个元素，浮动左对齐（float:left）,左侧外补丁(margin-left:50px;),在wrap层内，但在IE浏览器中Box1离左边的距离会是100px,而实际距离应是50px。当一个元素用于非float:none;的浮动状态时，IE下该元素既被视为块级元素，display:block; 
        </div> 
        <div class="clear"> 
            CSS: 
                <code>#box1{ margin-left:50px; float:left; background:#f60; width:200px;}</code> 
            XHTML: 
                <code><div class="wrap">
 
<div id="box1">这个元素，浮动左对齐（float:left）,左侧外补丁(margin-left:50px;),在wrap层内，但在IE浏览器中Box1离左边的距离会是100px,而实际距离应是50px。当一个元素用于非float:none;的浮动状态时，IE下该元素既被视为块级元素，display:block;
 
</div>
 
      </div></code>        </div> 
    </div> 
    <div class="wrap clearfix"> 
        <div id="box2">这是个拥有正确margin-left的元素，解决的办法就是，使浮动效果消失,这里采用了display:inline;原理可参阅<a href="http://old9.blogsome.com/2006/04/11/onhavinglayout/" _ewebeditor_ta_href="http%3A%2F%2Fold9.blogsome.com%2F2006%2F04%2F11%2Fonhavinglayout%2F">on having layout</a>。</div> 
        <div class="clear"> 
            CSS: 
                <code>#box2{ margin-left:50px; float:left; background:#f60; width:200px; display:inline ;}                </code> 
            XHTML: 
                <code><div class="wrap">
 
<div id="box2">这是个拥有正确margin-left的元素，解决的办法就是，使浮动效果消失,这里采用了display:inline;原理可参阅<a href="http://old9.blogsome.com/2006/04/11/onhavinglayout/" _ewebeditor_ta_href="http%3A%2F%2Fold9.blogsome.com%2F2006%2F04%2F11%2Fonhavinglayout%2F">on having layout</a>。</div>
 
      </div></code>         
        </div> 
    </div>

</div>

</body> 
</html>

　　 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

教程首页更多教程