IE CSS Bugs 列表和解决方法

时间 2019-11-24

标签 css bugs 列表解决方法栏目 CSS 繁體版

原文原文链接

咱们在开发中咱们常会在IE中遇到不少莫名的bug，尤为是老态龙钟的IE6浏览器。为了提升咱们的开发效率，须要常常总结，整理工做中遇到的问题。咱们在网络上找到的IE Bugs 资料是零散的。不过，在老外的http://haslayout.net/css/网站上,他就系统的总结了IE的一些Bugs，分享一下。css

目前，这个网站上包含了 46 个“普通的Bug” ， 5个“布局方面的Bug” ，6 个“能够绕开的Bug” 以及 1 个“IE崩溃的Bug”，全部的这些Bug有58个指南和70个解决方法。html

这个列表目前更新到：2009年8月19日，周三，15时38分47秒。shell

最新发表的教程：该网站包含44 IE6 bugs, 28 IE7 bugs 和19 IE8 bugs.浏览器

下面是全部的bug列表，你能够点击每一个BUG名的连接查看更详细的说明和解决方法。网络

IE的CSS Bug：普通Bug

这部分 IE 的 bug 是比较普通的没法归到其它种类，或是同时属于多个种类的Bug。app

General Internet Explorer CSS Bugs
解决方法名称	IE的版本	描述
Image Label Focus Bug(图片label bug)	IE8, IE7, IE6	当label中有img的时候没法触发点击选中form元素事件.
No Auto-Margin Center on Buttons Inconsistency (设置margin auto的button没有居中)	IE8	若是给像button这样的标签（如button input[type="button"] input[type="submit"]）设置{ display: block; margin-left: auto; margin-right: auto; }若是不设置宽度的话没法居中。
Incorrect Float Shrink-Wrap Bug (不正确的浮动伸展布局)	IE7, IE6	连续浮动的元素而且设置clear属性无法自动伸展。
Document Scrollbars Overflow Inconsistency （文档滚动bug）	IE7, IE6	不在html标签上设置overflow或许会影响到body上面的overflow。
Float Squeeze Weird Gap Bug （连续浮动元素bug）	IE7, IE6	A gap appears between last and second last floated elements that are stacked vertically.
Float Squeeze Duplicate Last Character Bug （连续浮动字符出现重复字符）	IE7, IE6	这个和上面的解决方案都差很少，它是经过加一个宽度，而这个是经过给浮动字符加一个position:relative;
Empty Element Height Bug （空元素高度bug）	IE7, IE6	有layout的空元素得到了高度
Form Control Double Margin Bug （表单元素双margin bug）	IE7, IE6	input和textarea或许会继承父元素的水平的margin
IE7 1px Dotted Border Appears As Dashed Bug （ie7的1px dotted 边框变成dashed边框的bug）	IE7	当设置了1px dotted边框后，有一个边框的宽度大于1px 的话其它为1px边框会变为dashed的样式
Relative Overflow Failure Bug（overflow bug）	IE7, IE6	当设置了overflow:hidden或auto的元素，若是子元素设置了相对定位，overflow就不起做用了，表现的是visible的样式，解决方法是给父元素加一个position:relative;
IE7 "Broken" :hover Absolute Bug （ie7的坏的:hover 绝对定位bug）	IE7	当子元素设置了absolute而且经过设置left top 等来经过:hover时改变其显示位置时将会不起做用若是他们再也不父元素的可视范围内，解决方法是给其加上margin-left:0%;
Button Background Shift On :active Bug（当:active时Button背景偏移）	IE8	给button设置:active时背景会作偏移，能够经过设置:active时的-ms-background-position-x和-ms-background-position-y来改变这个偏移。
Ignored :focus Bug	IE8	A ruleset, selector of which contains :focus that is followed by another simple selector, is ignored
Invisible Hover Border Bug （:hover边框消失bug）	IE8	当设置了outline的元素后，再设置:hover的时候，若是设置边框的话，将会不显示
Percentage Padding Margin Bug （百分比padding垂直margin bug）	IE8	当父元素设置了百分比的padding，子元素有垂直的margin的时候，就好像父元素被设置了margin同样，解决方法是给父元素加一个overflow:hidden/auto
Image Float Bullet Chaos Bug （图片浮动List标记错位bug）	IE8	当List里面有浮动的image时，List标记显示的位置跑在里面了，能够经过使用背景图片代替List自带的标记来解决。
Non-Inherited TH Text-Align Bug （TH没有继承Text-Align属性的bug）	IE8	当给table设置text-align时，TH没有继承样式，能够经过给TH设置text-align:inherit;来解决IE8下这个丑陋的bug。
32 Styles Limitation （32个Style限制）	IE8, IE7, IE6	在32个”style”方法(style, link, @import)后浏览器会忽略后面的样式
Hover White Background Ignore Bug（白色背景hover bug）	IE7	background 不会由于 :hover而改变，给hover设置background-color:#ffffff;时，背景不会改变，解决方法是设置background:#ffffff;
IE7 Child Selector Comment Bug	IE7	一个 selector 包含了一个子的selector，若是后面跟着一个注释，则会被彻底忽略。
Star HTML Bug （* html bug）	IE6	* html [selector]在ie6下一般不会被忽略，这个bug一般被用来做IE6的hack使用。
IE6 !important Ignore Bug	IE6	!important 关键字会忽略，important以后设置一样的规则后important会被忽略，这个bug也常被用来指定ie6的样式。
PNG Image and Background Color Mismatch （png图片和背景颜色不一致）	IE8 ,IE7,IE6	设置背景颜色和png图片背景一样的颜色代码最后表现不一致，原来是由于ie支持“PNG Gamma profiles”，解决方案是经过一个pngcrush程序来优化图片。而他们原本是一致的。IE认为这是他一个Feature。太好笑了。
No Auto Margin Center Pseudo-Bug	IE8 ,IE7,IE6	若是把margins 设置成 `auto` ，IE不会把组件放置在中间的位置。全部的浏览器都会，只有IE不会。给block元素设置margin auto没法居中，出现这种bug的缘由一般是没有Doctype，而后触发了ie的quirks mode，加上<!DOCTYPE html>就能够了。
:first-line !important Rule Ignore Bug(:first-line/:first-letter里的!important会忽略)	IE8	若是在伪class :first-line 内使用!important，那么其全部定义会被忽略。
:first-letter Ignore Bug	IE6	当:first-letter前面有逗号的时候ie6会忽略这条规则，解决方法是将:first-letter放到最后。
:first-letter !important Rule Ignore Bug	IE8	若是在伪class :first-letter内使用!important，那么其全部定义会被忽略。
Partial Click Bug v2	E7,IE6	设置了整个区域是能够点击的，但在IE中只有文本能够点击。
Staircase Bug	E7,IE6	浮动的元素排序起来就像一个楼梯。
Disappearing List Background Bug	IE6	B <li>, <dt>, <dd> 没有背景。
noscript Ghost Bug	IE8,IE7,IE6	<noscript> 标识中只有 borders/background 才有用。
No Transparency Click Bug (透明区域没法点击bug)	IE8,IE7,IE6	背景透明的图片在做为连接时，而且其“filter”被设置成了PNG透明，但其背景仍是不可点击。
List Drop Shift Bug (List标记偏移)	IE8	在<li>中的内容被换行了。当给list里面的元素设置display和overflow属性后List标记会偏移，解决方法是给里面的元素加一个float:right; width:100%;可使用ie的条件注释针对ie8
No Increase on <ol> Numbers Bug (ol数字标记不自增)	IE7,IE6	<ol> 中的 <li> 列表序号不会增长。当给li设置宽度时会触发这个bug，解决方法是给li设置display:list-item .
No Bullets on <ul> and <ol> Bug (ul/ol标记消失bug)	IE7,IE6	在<ul> 和 <ol> 中看不到列表序号/数字了。当ul/ol触发了layout而且有margin-left会触发这个bug，解决方案是给li设置margin-left .
No line-height Vertical Center on Images Bug (图片不垂直居中)	IE7,IE6	图片使用line-height 方法不能垂直居中. 当使用line-height来居中图片时在ie6/7下不会生效，解决方法是在img后加一个空白元素如<span></span>.
No Background Image Bug (没有背景图片bug)	IE8,IE7,IE6	在IE中使用background没法定义背景图. 当使用background的时候若是在url()后没有加空格背景图片就不会显示。
Custom Cursor Bug (自定义鼠标bug)	IE8,IE7,IE6	自定义鼠标不工做. 当自定义鼠标样式的时候，若是url()里面的路径是相对路径的话，ie会认为相对于当前文档而不会出现鼠标样式的图片，解决方法是采用绝对路径。
Leaking Background Bug (背景溢出bug)	IE6	背景从一个元件的内部溢出到外部. 一个容器里面有浮动元素而且经过加一个clear:both的额外div来清除浮动会产生此bug，解决方案就是建议尽可能不要经过增长一个 clear:both的div来清除浮动，能够经过在外层加上overflow:hidden;对于ie能够经过加上zoom:1；来触发ie的 layout
Expanding Height Bug (高度扩展bug)	IE6	元件的高度比指定的要长得多。当高度很窄如小于12px时ie6会扩展高度，解决方法是设置overlfow:hidden或font-size:0;
Expanding Width Bug (宽度扩展bug)	IE6	元件的宽度比指定的要长得多。当连续英文字符的时候设定宽度不起做用，解决方法是设置overflow:hidden或word-wrap:break-word;
Double Margin Bug (浮动双margin)	IE6	float元件的左和右的空白（margins）被加倍了。当给一个浮动元素设置margin-left或margin-right时margin加倍，解决方法是加上一条display:inline;
Negative Margin Bug (负margin bug)	IE7,IE6	若是使用负数来指定页白（margins）里面的元件会被外面的元件所遮挡。当给一个有layout容器里面的元素设置负marin时内容会被截断，解决方法是不让容器有layout或者给负marin的元素设置position:relative;zoom:1;
Italics Float Bug	IE6	float的元件中的字体会被设置成倾斜。
3px Gap Bug aka Text Jog Bug (3px间距bug)	IE6	下一个float的元件不是有一个3px的空隙，就是被换行了。当几个连续浮动且有layout的元素排列时会有3px的间距，解决方法就是给这些元素设置3px的负margin或加上overflow:hidden;
Text-Align Bug	IE7,IE6	text-align属性会影响整个元件内的全部内容。当容器外面设置了text-align，若是容器里面有文本和其余block的元素, block的元素也会继承text-align，这是不正确的，解决方法是从新写出合理的有语义的markup，如文本外面加一个p.

IE的CSS Bug：布局类 Bug

hasLayout Internet Explorer CSS Bugs
解决方法名称	IE的版本	描述
Scared of Floats Bug	IE7, IE6	elements with layout clear floats instead of going around floated elements
Border Chaos Bug	IE6	连框显示是混乱的
Sub-Hover Bug	IE6	一些selectors 如 a:hover foo{} 没法正常工做
Partial Click Bug	IE6	在定义了display: block的连接中(<a>) 只有文本是能够点的。
Disappearing Content Bug	IE6	当咱们滚动窗口的时候，或是最大化最小化窗品的时候，有一些内容会重复显示。

IE的CSS Bug：不支持的功能

No Support Workarounds
解决方法名称	IE的版本	描述
No Child Selector Support Workaround	IE6	子 selector 将被忽略
Max-Height Workaround	IE6	max-height 不支持
Max-Width Workaround	IE6	max-width 不支持
Opacity	IE8，IE7,IE6	opacity 属性不支持
Min-Width Workaround	IE6	min-width 属性不支持
Min-Height Workaround	IE6	min-height 属性将被忽略

IE的CSS Bug：程序崩溃 Bug

这个BUG能够致使整个 IE 崩溃.布局

Crash Bugs
解决方法名称	IE的版本	描述
Hover Crash Bug	IE6	当你把鼠标移上 :hover 的连接时，浏览器会崩溃。

原英文来源：http://haslayout.net/css/字体

中文译文来源：http://coolshell.cn/?p=1245优化