IE 5.x/Win 和模型bug

IEbug

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 ;}

-->

IE 5.x/Win 和模型bug

这里是一个width:500px;margin:10px;padding:10px; border:10px;的一个盒子.
使用widht(空格)/**/:530px，解决IE5.x系列的盒解析bug，因为IE5.x系列浏览器能读到这句.在IE5.x Win，IE6.0 Win下效果一致.
如何使用hack解决IE5.x盒解析bug?
#content {

}
#content {

}
<!--[if Lte IE6]>

这里是一个width:500px;margin:10px;padding:10px; border:10px;的一个盒子，IE5.x Win解析不正常。
IE6盒模型在向后兼容的同时也包容了以前的错误，IE6其实有两个核心，在旧的页面前他仍旧表现出对错误的宽容，只有在文档中严格地加上文档类型(DOCTYPE)声明，IE6才能够接受正确的box-model所以，hack必须和正确的DOCTYPE同时包含在文档中才能够正常工作。

IE/div浮动文本出现3px间距的bug

这里是浮动box

左边对象是浮动的，这里是采用margin-left来定位，这里的文本会离左边有3px的空白误差。

这里是浮动box,使用了* html #floatbox2 {margin-right: -3px;}解决3px bug

左边对象是浮动的，这里是采用* html p.no3px{height:1%;margin-left: 0;}，这里的文本会离左边没有了3px的空白误差。

IE/div浮动文本出现3px间距的bug产生的条件:

当左边对象是浮动的，右边对象采用外补丁的左边距(margin-left:?px;)来定位，则右边对象内的文本会离左边有3px的空白误差。

CSS:
#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;*/

XHTML:
<div id="ie3px">这里是浮动box</div>

<p class="ie3px">左边对象是浮动的，这里是采用margin-left来定位，这里的文本会离左边有3px的空白误差。</p>


IE/div浮动文本出现3px间距的bug解决方法:

利用hack *html div{}为IE单独写一个样式

* html #ieno3px{margin-right:-3px;}

* html p.no3px{height:1%;margin-left: 0;}
CSS:
#ieno3px{float: left; width: 100px; height: 50px; background: #f60;}

* html p.no3px{height:1%;margin-left: 0;}
XHTML:
<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>

IE/浮动对象外补丁的双倍距离

这个元素，浮动左对齐（float:left）,左侧外补丁(margin-left:50px;),在wrap层内，但在IE浏览器中Box1离左边的距离会是100px,而实际距离应是50px。当一个元素用于非float:none;的浮动状态时，IE下该元素既被视为块级元素，display:block;

CSS:
#box1{ margin-left:50px; float:left; background:#f60; width:200px;}
XHTML:
<div class="wrap">

</div>

这是个拥有正确margin-left的元素，解决的办法就是，使浮动效果消失,这里采用了display:inline;原理可参阅on having layout。

CSS:
#box2{ margin-left:50px; float:left; background:#f60; width:200px; display:inline ;}
XHTML:
<div class="wrap">

</div>

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