猿吟鹤唳本无意,不知下有行人行

IE css bugs汇总

本文翻译是 http://haslayout.net/css/

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

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

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

下面是所有的bug列表,你可以点击每个BUG名的链接查看更详细的说明和解决方法。

IE的CSS Bug:普通Bug
这部分 IE 的 bug 是比较普通的无法归到其它种类,或是同时属于多个种类的Bug。

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, IE6A 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, IE6input和textarea或许会继承父元素的水平的marginIE7 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 IE8A ruleset, selector of which contains :focus that is followed by another simple selector, is ignoredInvisible Hover Border Bug (:hover边框消失bug)IE8当设置了outline的元素后,再设置:hover的时候,如果设置边框的话,将会不显示Percentage Padding Margin Bug (百分比padding垂直margin bug)IE8当父元素设置了百分比的padding,子元素有垂直的margin的时候,
就好像父元素被设置了margin一样,解决方法是给父元素加一个overflow:hidden/autoImage 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)IE7background 不会因为 :hover而改变,给hover设置background-color:#ffffff;时,背景不会改变,解决方法是设置background:#ffffff;IE7 Child Selector Comment BugIE7一个 selector 包含了一个子的selector,如果后面跟着一个注释,则会被完全忽略。Star HTML Bug (* html bug)IE6* html [selector]在ie6下通常不会被忽略,这个bug通常被用来作IE6的hack使用。IE6 !important Ignore BugIE6!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-BugIE8 ,IE7,IE6如果把margins 设置成 `auto` ,IE不会把组件放置在中间的位置。所有的浏览器都会,只有IE不会。给block元素设置margin auto无法居中,出现这种bug的原因通常是没有Doctype,然后触发了ie的quirks mode,加上就可以了。:first-line !important Rule Ignore Bug(:first-line/:first-letter里的!important会忽略)IE8如果在伪class :first-line 内使用!important,那么其所有定义会被忽略。:first-letter Ignore BugIE6当:first-letter前面有逗号的时候ie6会忽略这条规则,解决方法是将:first-letter放到最后。:first-letter !important Rule Ignore BugIE8如果在伪class :first-letter内使用!important,那么其所有定义会被忽略。Partial Click Bug v2E7,IE6设置了整个区域是可以点击的,但在IE中只有文本可以点击。Staircase BugE7,IE6浮动的元素排序起来就像一个楼梯。Disappearing List Background BugIE6B

  • ,
    ,

    没有背景。noscript Ghost BugIE8,IE7,IE6
  • 发表评论

    您的电子邮箱地址不会被公开。