IE6中的常见BUG与相应的解决办法：
1、IE6双倍边距bug
当页面上的元素使用 float浮动时，不管是向左还是向右浮动；只要该元素带有margin像素都会使该值乘以2，例如“margin-left:10px” 在IE6中，该值就会被解析为20px。想要解决这个BUG就需要在该元素中加入display:inline 或 display:block 明确其元素类型即可解决双倍边距的BUG。
2、IE6中3像素问题及解决办法
当元素使用float浮动后，元素与相邻的元素之间会产生3px的间隙。诡异的是如果右侧的容器没设置高度时3px的间隙在相邻容器的内部，当设定高度后又跑到容器的相反侧了。要解决这类BUG的话， 需要使布局在同一行的元素都加上float浮动。
3、IE6中奇数宽高的BUG
IE6中奇数的高宽显示大小与偶数高宽显示大小存在一定的不同。其中要问题是出在奇数高宽上。要解决此类问题，只需要尽量将外部定位的div高宽写成偶数即可。
4、IE6中图片链接的下方有间隙
IE6中图片的下方会存在一定的间隙，尤其在图片垂直挨着图片的时候，即可看到这样的间隙。要解决此类问题，需要将img标签定义为 display:block 或定义vertical-align对应的属性。也可以为img对应的样式写入font-size:0。
5、IE6下空元素的高度BUG
如果一个元素中 没有任何内容，当在样式中为这个元素设置了 0-19px之间的高度时。此元素的高度 始终为19px。
解决的方法有四种:
(1) 在元素的css中加入：overflow:hidden
(2) 在元素中插入html注释：<!– >
(3) 在元素中插入html的空白符：
(4) 在元素的css中加入：font-size:0
6、重复文字的BUG
在某些比较复杂的排版中，有时候浮动元素的最后一些字符会出现在clear清除元素的下面。
解决方法如下：
(1) 确保元素都带有display:inline
(2) 在最后一个元素上使用“margin-right:-3px
(3) 为浮动元素的最后一个条目加上条件注释，<!–[if !IE]>xxx<![endif]–>
(4) 在容器的最后元素使用一个空白的div，为这个div指定不超过容器的宽度。
7、IE6中 z-index失效
具体BUG为，元素的父级元素设置的z-index为1，那么其子级元素再设置z-index时会失效，其层级会继承父级元素的设置，造成某些层级调整上的BUG。详细解释可以阅读IE6中部分情况下z-index无效的原因，以及解决办法 http://www.frontopen.com/199.html
(1) z-index无论设置多高都不起作用情况。
条件：1、父标签 position属性为relative；
2、问题标签无position属性（不包括static）；
3、问题标签含有浮动(float)属性。
解决：1、position:relative改为position:absolute；
2、去除浮动；
3、浮动元素添加position属性（如relative，absolute等）
(2) 父标签position属性为relative或absolute时，子标签的absolute属性是相对于父标签而言的。而在IE6下，层级的表现有时候不是看子标签的z-index多高，而要看它们的父标签的z-index谁高谁低。（IE7与IE6有着同样的bug）
结语： 实际上IE6中，很多BUG的解决方法都可以使用display:inline、font-size:0、float解决。因此我们在书写代码时要记住，一旦使用了float浮动，就为元素增加一个display:inline样式，可以有效的避免浮动造成的样式错乱问题。使用空DIV时，为了避免其高度影响布局美观，也可以为其加上font-size:0 这样就很容易避免一些兼容上的问题。
8、单行文字的高度问题
Windows 7
Firefox、Opera、Google浏览器等，“12px”的字以12px的高居中（上下各有4象素的距离）
而IE内核类浏览器（遨游、360、TT、IE6、IE7、IE8）却“统一”的呈现“35”状况。以12px的字高，在20px的行高里居中偏上一个象素，即上3px、下5px的！
Windows XP
Firefox、Opera、Google浏览器等：字高11px，上4px，下5px
IE内核（遨游、360、TT、IE6、IE7、IE8）：字高11px，上3px，下6px
以非IE内核的浏览结果为准
<style type=”text/css” >
.line12 {
line-height: 20px;
line-height: 22px9;
_overflow: hidden;
height: 20px;
font-size: 12px;
border: 1px solid #000;
}
</style>
IE内核类的为准
<style type=”text/css” >
.line12 {
line-height: 20px;
line-height: 22px9;
_overflow: hidden;
height: 20px;
font-size: 12px;
border: 1px solid #000;
}
</style>
总结：以非IE类的为准，优点是上下居中，这在单行图文时最佳，虽然多了行样式－－但值得。致命点是：”overflow: hidden;“，如果你在容器（DIV）里有其他绝对定位的层时，别用！相反以IE类为准的，即没有这个问题。遗憾的是：总是差那么象素。如果想要完 美，只能用其他的手段（padding、margin）解决了！
认识hasLayout——IE浏览器css bug的一大罪恶根源
什么是hasLayout？hasLayout是IE特有的一个属性。很多的ie下的css bug都与其息息相关。在ie中，一个元素要么自己对自身的内容进行计算大小和组织，要么依赖于父元素来计算尺寸和组织内容。当一个元素的hasLayout属性值为true时，它负责对自己和可能的子孙元素进行尺寸计算和定位。虽然这意味着这个元素需要花更多的代价来维护自身和里面的内容，而不是依赖于祖先元素来完成这些工作。
下列元素默认 hasLayout=true
<table> <td> <body> <img> <hr> <input> <select> <textarea> <button> <iframe> <embed> <object> <applet> <marquee>
很多情况下，我们把 hasLayout的状态改成true 就可以解决很大部分ie下显示的bug。
hasLayout属性不能直接设定，你只能通过设定一些特定的css属性来触发并改变 hasLayout 状态。下面列出可以触发hasLayout的一些CSS属性值。
————————————-
display
启动haslayout的值:inline-block
取消hasLayout的值:其他值
————————————–
width/height
启动hasLayout的值：除了auto以外的值
取消hasLayout的值：auto
—————————————
position
启动hasLayout的值：absolute
取消hasLayout的值：static
—————————————-
float
启动hasLayout的值：left或right
取消hasLayout的值：none
—————————————
zoom
启动hasLayout的值：有值
取消hasLayout的值：narmal或者空值
（zoom是微软IE专有属性，可以触发hasLayout但不会影响页面的显示效果。zoom: 1常用来除错，不过 ie 5 对这个属性不支持。）
—————————————-
writing-mode: tb-rl
这也是微软专有的属性。
ie7还有一些额外的属性可以触发该属性（不完全列表）：
min-height: (任何值)
max-height: (任何值除了none)
min-width: (任何值)
max-width: (任何值除了none)
overflow: (任何值除了visible)
overflow-x: (任何值除了visible)
overflow-y: (任何值除了visible)5
position: fixed
要注意的是，hasLayout是微软专有的东西，对firefox等比较遵守标准的浏览器就无效了，因此不可太过依赖。貌似现在的IE8就已经不用特意去触发hasLayout就可以得到和firefox一致的效果，不知ie8是否已经弃用这个属性了？
其实依据合理的语义化，恰当的文档流，正确的标准化所生产出来的页面，在各个公司出品的标准渲染的浏览器下，一般并不会存在太多兼容性的问题的。
一般如果是因为layout而引起的显示不符期望效果的话，在ff下会表现正常，而在ie下会出现错误。这个时候可以尝试触发父容器及其中的子容器的haslayout属性，通常可以通过加上zoom: 1;来调试。直到找到了产生问题的元素，再进行针对性的修正。最好的办法是对这个元素设置尺寸属性。但是，有时不便指定尺寸属性的情况下，就只能寻找替代方案了。对于ie7 ，最好的办法是设置最小高度属性为0；这个技术是无害的，因为0本来就是这个属性的初始值。而且没有必要对其他浏览器隐藏这个属性。而对于ie6和更早版本中触发一个元素hasLayout的方法是在overflow属性是visible的情况下设置这个元素的高度属性为1%，然后对其他浏览器隐藏这个设置。这种技术就是著名的Holly hack。
1、IE6双倍边距bug
当页面上的元素使用 float浮动时，不管是向左还是向右浮动；只要该元素带有margin像素都会使该值乘以2，例如“margin-left:10px” 在IE6中，该值就会被解析为20px。想要解决这个BUG就需要在该元素中加入display:inline 或 display:block 明确其元素类型即可解决双倍边距的BUG。
2、IE6中3像素问题及解决办法
当元素使用float浮动后，元素与相邻的元素之间会产生3px的间隙。诡异的是如果右侧的容器没设置高度时3px的间隙在相邻容器的内部，当设定高度后又跑到容器的相反侧了。要解决这类BUG的话， 需要使布局在同一行的元素都加上float浮动。
3、IE6中奇数宽高的BUG
IE6中奇数的高宽显示大小与偶数高宽显示大小存在一定的不同。其中要问题是出在奇数高宽上。要解决此类问题，只需要尽量将外部定位的div高宽写成偶数即可。
4、IE6中图片链接的下方有间隙
IE6中图片的下方会存在一定的间隙，尤其在图片垂直挨着图片的时候，即可看到这样的间隙。要解决此类问题，需要将img标签定义为 display:block 或定义vertical-align对应的属性。也可以为img对应的样式写入font-size:0。
5、IE6下空元素的高度BUG
如果一个元素中 没有任何内容，当在样式中为这个元素设置了 0-19px之间的高度时。此元素的高度 始终为19px。
解决的方法有四种:
(1) 在元素的css中加入：overflow:hidden
(2) 在元素中插入html注释：<!– >
(3) 在元素中插入html的空白符：
(4) 在元素的css中加入：font-size:0
6、重复文字的BUG
在某些比较复杂的排版中，有时候浮动元素的最后一些字符会出现在clear清除元素的下面。
解决方法如下：
(1) 确保元素都带有display:inline
(2) 在最后一个元素上使用“margin-right:-3px
(3) 为浮动元素的最后一个条目加上条件注释，<!–[if !IE]>xxx<![endif]–>
(4) 在容器的最后元素使用一个空白的div，为这个div指定不超过容器的宽度。
7、IE6中 z-index失效
具体BUG为，元素的父级元素设置的z-index为1，那么其子级元素再设置z-index时会失效，其层级会继承父级元素的设置，造成某些层级调整上的BUG。详细解释可以阅读IE6中部分情况下z-index无效的原因，以及解决办法 http://www.frontopen.com/199.html
(1) z-index无论设置多高都不起作用情况。
条件：1、父标签 position属性为relative；
2、问题标签无position属性（不包括static）；
3、问题标签含有浮动(float)属性。
解决：1、position:relative改为position:absolute；
2、去除浮动；
3、浮动元素添加position属性（如relative，absolute等）
(2) 父标签position属性为relative或absolute时，子标签的absolute属性是相对于父标签而言的。而在IE6下，层级的表现有时候不是看子标签的z-index多高，而要看它们的父标签的z-index谁高谁低。（IE7与IE6有着同样的bug）
结语： 实际上IE6中，很多BUG的解决方法都可以使用display:inline、font-size:0、float解决。因此我们在书写代码时要记住，一旦使用了float浮动，就为元素增加一个display:inline样式，可以有效的避免浮动造成的样式错乱问题。使用空DIV时，为了避免其高度影响布局美观，也可以为其加上font-size:0 这样就很容易避免一些兼容上的问题。
8、单行文字的高度问题
Windows 7
Firefox、Opera、Google浏览器等，“12px”的字以12px的高居中（上下各有4象素的距离）
而IE内核类浏览器（遨游、360、TT、IE6、IE7、IE8）却“统一”的呈现“35”状况。以12px的字高，在20px的行高里居中偏上一个象素，即上3px、下5px的！
Windows XP
Firefox、Opera、Google浏览器等：字高11px，上4px，下5px
IE内核（遨游、360、TT、IE6、IE7、IE8）：字高11px，上3px，下6px
以非IE内核的浏览结果为准
<style type=”text/css” >
.line12 {
line-height: 20px;
line-height: 22px9;
_overflow: hidden;
height: 20px;
font-size: 12px;
border: 1px solid #000;
}
</style>
IE内核类的为准
<style type=”text/css” >
.line12 {
line-height: 20px;
line-height: 22px9;
_overflow: hidden;
height: 20px;
font-size: 12px;
border: 1px solid #000;
}
</style>
总结：以非IE类的为准，优点是上下居中，这在单行图文时最佳，虽然多了行样式－－但值得。致命点是：”overflow: hidden;“，如果你在容器（DIV）里有其他绝对定位的层时，别用！相反以IE类为准的，即没有这个问题。遗憾的是：总是差那么象素。如果想要完 美，只能用其他的手段（padding、margin）解决了！
认识hasLayout——IE浏览器css bug的一大罪恶根源
什么是hasLayout？hasLayout是IE特有的一个属性。很多的ie下的css bug都与其息息相关。在ie中，一个元素要么自己对自身的内容进行计算大小和组织，要么依赖于父元素来计算尺寸和组织内容。当一个元素的hasLayout属性值为true时，它负责对自己和可能的子孙元素进行尺寸计算和定位。虽然这意味着这个元素需要花更多的代价来维护自身和里面的内容，而不是依赖于祖先元素来完成这些工作。
下列元素默认 hasLayout=true
<table> <td> <body> <img> <hr> <input> <select> <textarea> <button> <iframe> <embed> <object> <applet> <marquee>
很多情况下，我们把 hasLayout的状态改成true 就可以解决很大部分ie下显示的bug。
hasLayout属性不能直接设定，你只能通过设定一些特定的css属性来触发并改变 hasLayout 状态。下面列出可以触发hasLayout的一些CSS属性值。
————————————-
display
启动haslayout的值:inline-block
取消hasLayout的值:其他值
————————————–
width/height
启动hasLayout的值：除了auto以外的值
取消hasLayout的值：auto
—————————————
position
启动hasLayout的值：absolute
取消hasLayout的值：static
—————————————-
float
启动hasLayout的值：left或right
取消hasLayout的值：none
—————————————
zoom
启动hasLayout的值：有值
取消hasLayout的值：narmal或者空值
（zoom是微软IE专有属性，可以触发hasLayout但不会影响页面的显示效果。zoom: 1常用来除错，不过 ie 5 对这个属性不支持。）
—————————————-
writing-mode: tb-rl
这也是微软专有的属性。
ie7还有一些额外的属性可以触发该属性（不完全列表）：
min-height: (任何值)
max-height: (任何值除了none)
min-width: (任何值)
max-width: (任何值除了none)
overflow: (任何值除了visible)
overflow-x: (任何值除了visible)
overflow-y: (任何值除了visible)5
position: fixed
要注意的是，hasLayout是微软专有的东西，对firefox等比较遵守标准的浏览器就无效了，因此不可太过依赖。貌似现在的IE8就已经不用特意去触发hasLayout就可以得到和firefox一致的效果，不知ie8是否已经弃用这个属性了？
其实依据合理的语义化，恰当的文档流，正确的标准化所生产出来的页面，在各个公司出品的标准渲染的浏览器下，一般并不会存在太多兼容性的问题的。
一般如果是因为layout而引起的显示不符期望效果的话，在ff下会表现正常，而在ie下会出现错误。这个时候可以尝试触发父容器及其中的子容器的haslayout属性，通常可以通过加上zoom: 1;来调试。直到找到了产生问题的元素，再进行针对性的修正。最好的办法是对这个元素设置尺寸属性。但是，有时不便指定尺寸属性的情况下，就只能寻找替代方案了。对于ie7 ，最好的办法是设置最小高度属性为0；这个技术是无害的，因为0本来就是这个属性的初始值。而且没有必要对其他浏览器隐藏这个属性。而对于ie6和更早版本中触发一个元素hasLayout的方法是在overflow属性是visible的情况下设置这个元素的高度属性为1%，然后对其他浏览器隐藏这个设置。这种技术就是著名的Holly hack。
174
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
