44种IE css bug实例测试总结
web前端，我们可以把它理解成浏览器端。从这种意义上来讲，开发者日常工作跟浏览器关系是相对紧密的；
我们今天要探讨的问题，就是关于浏览器中的另类（当然开发人员是这么认为的）—IE 对CSS解释和渲染上的一些bug，以及对这些bug的解决方案。
当然你会说，ie的CSS bug咱都给haslayout属性来解决不就完了；您这就有点儿太低估ie的“能力”了；不否认在接下来的实例中，确实有的bug是haslayout属性造成的，但不是全部。
以下的44个bug及解决方案实例是从一篇老外的博文上翻译过来的（其实这博客地址已经在我的收藏夹呆了快一年）了，之所以这次抽时间来翻译它，也 是因为最近项目中出现的N多问题，我发现都能从这里找到；其实早前在豆丁网上看到有人翻译过(只是对BUG list做了简单的翻译，而实例却没有)，我想自己亲自来做一变实例测试，对自己还是有很大好处的，而且也想把这个拿出来分享。
注意：1)以下关于ie 的CSS bug在我注明的测试日之前是一直存在的(吼吼。。以后的事儿谁也不知道)；2)关于bug的解决方案在我注明测试日之前是有效的。3)查看bug请点击bug Name 相关链接，查看解决方案请点击”GO”;
说明：如果您觉得看英文比较爽，请猛点这里查看原文(http://haslayout.net/css/)
实例LIST>>
| Bug Name | 影响版本 | 解决方案 | bug描述 |
|---|---|---|---|
| >label标签中有img标签 无法focus到表单元素 | IE8, IE7, IE6 | Go | 当img标签包含在label标签中，点击img标签时，无法触发form元素选中事件 |
| >button元素 不会自动居中 | IE8 | Go Go2 | Button元素和input元素如：type=submit,type=button,type=reset and so on,当应用{display:block;margin-left:auto;margin :auto;}属性时，是不起作用的。 |
| >错误的浮动布局 | IE7, IE6 | Go | 连续N个浮动元素且有clear属性时，显示出错误的排版（宽度没有自适应） |
| >页面滚动Bug | IE7, IE6 | Go | 非常怪异的溢出，看代码 |
| >连续浮动元素Bug | IE7, IE6 | Go | 在连续浮动元素中，最后一个与倒数第2个元素间会出现一段留白。 |
| >连续浮动元素会重复出现最后一个元素的Bug | IE7, IE6 | Go | 在连续浮动元素中，最后一个元素是重复的。 |
| >空标签会有height值 | IE7, IE6 | Go | 拥有layout属性的空标签会有height值 |
| >表单元素双margin值 | IE7, IE6 | Go | input textarea元素在水平方向的margin值会继承父级元素的margin和“layout” |
| >边框dotted属性值等同dashed属性值ie7 | IE7 | Go | 当元素某边应用{1px dotted}属性且至少有一边的宽度大于1px时，dotted会出现dashed效果 |
| >relative属性overflow失效 | IE7, IE6 | Go | 当子元素设置position为relative的时候，父元素的overflow属性值hidden与auto均失效 |
| >IE7 “Broken” :hover Absolute Bug | IE7 | Go | 当子元素设置position为relative的时候，父元素的overflow属性值hidden与auto均失效 |
| >Button Background Shift On :active Bug | IE8 | Go | :active时背景偏移当在button input type=”submit”标签应用:active状态时 背景偏上及偏下 |
| >Invisible Hover Border Bug | IE8 | Go | hover时边框隐藏元素设置了outline属性，当:hover状态时，bottom边框会完全不显示或少1px; |
| >Percentage Padding Margin Bug | IE8 | Go | 元素垂直方向设置margin值，且父元素设置了padding值为百分比以及父元素的父级设置了border或padding属性是，产生的bug，且看实例： |
| >图片浮动list标记bug | IE8 | Go | 当list有浮动图片是list标记位置错误或根本不显示 |
| >TH标签没有继承text-align属性bug | IE8 | Go | TH元素不会继承来自其父元素的text-align的属性值 |
| >32个style限制 | IE8, IE7, IE6 | Go | 页面中style标签大于等于32个时，第32个及之后的style都将被忽略（当然包括 @import这种形式外链的样式表） |
| >hover状态下白色背景忽略bug | IE7 | Go | :hover时背景不会改变 |
| >ie7下子选择器注释bug | IE7 | Go | 在注释后包含有子选择器的选择器会被忽视； |
| >使用*HTML bug | IE6 | Go | * HTML选择器ie6是能识别的 |
| >ie6忽略！important bug | IE6 | Go | 当我们在CSS规则后面加上!important 关键字时，ie6是不能识别的； |
| >PNG背景与背景颜色不匹配 | IE8, IE7, IE6 | Go | 元素应用PNG背景图片与背景颜色，且PNG图片的颜色与背景颜色值相同，但ie表现bug |
| >margin值为auto无法居中 暂且叫伪bug | IE8, IE7, IE6 | Go | 给块级元素设置margin值为auto时没法居中 |
| >:first-line !important规则无用 | IE8 | Go | 当应用:first-line伪类，且有!important规则是，在ie8下是无法正常显示的 |
| >:first-letter忽视bug | IE6 | Go | 此bug是由一个有趣的原因引起； |
| >不完全的点击bug | IE7, IE6 | Go | a元素仅仅在有文字的地方才能点击，且:hover效果也只有鼠标移动到文字上才会出现 |
| >浮动元素阶梯状bug | IE7, IE6 | Go | 浮动元素像楼梯状排列在一起 |
| >列表背景消失bug | IE6 | Go | li,dt,dd元素背景不显示 |
| >noscript标签背景与边框bug | IE8, IE7, IE6 | Go | noscript元素只有在浏览器禁用script时才会出现，但在ie浏览器却非全是如此； |
| >透明区域无法点击bug | IE8, IE7, IE6 | Go | 用PNG图片做背景时，a标签的透明区域无法点击； |
| >list位置偏移bug | IE8 | Go | 在ie8中，我们看到list与标记向下偏移 |
| >ol列表数没有增加bug | IE7, IE6 | Go | 在ie6 7中我们无法看到ol列表数增加，而始终是1，不会发生变化 |
| >ul与ol列表编号与符号隐藏bug | IE7, IE6 | Go | 在ie6 7中我们无法看到ol与ul列表数与图标； |
| >无法让图片垂直居中 | IE7, IE6 | Go | 给元素使用line-height方法无法让内部图片垂直居中显示； |
| >背景图片不显示 | IE8, IE7, IE6 | Go | background 属性应用时在ie中背景图片不显示 |
| >自定义鼠标bug | IE8, IE7, IE6 | Go | 自定义鼠标在ie中不显示 |
| >背景溢出bug | IE6 | Go | 背景色会从一个元素溢出到与他下面相邻的元素里 |
| >高度扩大Bug | IE6 | Go Go | 元素自身的高度大于对其定义的高度（此高度值很小） |
| >宽度度扩大Bug | IE6 | Go | 元素自身的高度大于对其定义的宽度(英文状态下) |
| >双边距bug | IE6 | Go | 浮动元素产生双倍的左右边距 |
| >负边距bug | IE7, IE6 | Go | 当元素定义了负边距时，超出父元素部分会被隐藏掉; |
| >斜体字浮动bug | IE6 | Go | 浮动元素字体为斜体时，与其相邻的浮动元素会被挤下； |
| >3px间隙bug | IE6 | Go | 浮动元素相邻的元素或者有3px的间隙，或者向下移动了位置 |
| >Text-Align Bug | IE7, IE6 | Go | text-align属性影响块级元素 |
