IE常见Bug

1.:focus + selector {} 选择器失效，影响版本ie8，http://haslayout.net/css/Ignored--focus-Bug，
解决方法：在失效选择器后面添加一个空选择器 :focus{}

2.忽略'>'后有注释的选择器：selector> /**/ selector{}，影响版本ie6，http://haslayout.net/css/ie7-child-selector-comment-bug，解决方法：删除注释(官方DEMO有误)

3.ie7的坏的:hover 绝对定位bug，影响版本ie7, 当子元素设置了absolute并且通过设置left top 等来通过:hover时改变其显示位置时将会不起作用，如果他们不在父元素的可视范围内，http://haslayout.net/css/ie7-broken-hover-absolute-bug
解决方法是给其加上margin-left:0%;

4.当:active时Button背景偏移，影响版本ie8，给button设置:active时背景会做偏移，可以通过设置:active时的 -ms-background-position-x和-ms-background-position-y来改变这个偏移。

5.:hover边框消失bug，影响版本ie8, 当设置了outline的元素后，再设置:hover的时候，如果设置边框的话，将会不显示

6.:first-line/:first-letter里的!important会忽略，影响版本ie8, 在:first-line/:first-letter里应用!important的规则会被忽略，http://haslayout.net/css/-first-line--important-Rule-Ignore-Bug

解决方法就是不用!important

7.:first-letter被忽略的bug, 影响版本ie6, 当:first-letter前面有逗号的时候ie6会忽略这条规则，http://haslayout.net/css/-first-letter-Ignore-Bug
解决方法是将:first-letter放到最后。

8.position:absolute元素中，a{ display:block}, 在非:hover时只有文本可点击

A:http://haslayout.net/css/Partial-Click-Bug，影响版本ie6，解决方法：设置layout

B:http://haslayout.net/css/Partial-Click-Bug-v2，影响版本ie6/7，解决方法：给a添加background, 如果背景透明，使用background:url('任何页面中已经缓存的文件链接')；不推荐backgroundurl(#)[官方的解决方法]，因为会增加一下HTTP请求

9.文档滚动bug，影响版本ie6/ie7，不在html标签上设置overflow或许会影响到body上面的overflow
具体请看  http://haslayout.net/css/Document-Scrollbars-Overflow-Inconsistency
解决方法：html{ overflow:visible;} body{ overflow:hidden;}

10.* html bug，影响版本ie6，* html [selector]在ie6下通常不会被忽略，这个bug通常被用来作ie6的hack使用。

11.!important bug, 影响版本ie6, 在important之后设置同样的规则后important会被忽略，这个bug也常被用来指定ie6的样式。

12.给两个浮动元素的某中一个的文字设定为斜体，另一个元素下拉在有斜体文字元素的下面，影响版本ie6，http://haslayout.net/css/Italics-Float-Bug
解决方法：给有斜体文字的元素添加overflow:hidden

13.不正确的浮动伸展布局，影响版本ie6/ie7，连续浮动的元素并且设置clear属性没法自动伸展
demo http://haslayout.net/demos/Incorrect-Float-Shrink-Wrap-Bug-Demo.html
fix demo  http://haslayout.net/demos/Incorrect-Float-Shrink-Wrap-Bug-Fixed-Demo.html
解决方法：给连续浮动元素加一个span然后设置display:inline-block和display:block

14.连续浮动元素bug，影响版本ie6/ie7，http://haslayout.net/css/Float-Squeeze-Weird-Gap-Bug

15.连续浮动字符出现重复字符，影响版本ie6/ie7, http://haslayout.net/css/Float-Squeeze-Duplicate-Last-Character-Bug
这个和14的解决方案都差不多，14是通过加一个宽度，而这个是通过给浮动字符加一个position:relative;

16.空元素高度bug，影响版本ie6/ie7，有layout的空元素获得了高度
http://haslayout.net/css/Empty-Element-Height-Bug

<div></div>
div {
background: blue;
width:100%; /* to give "layout"  */
}
解决办法：
div {
height: 0;
overflow: hidden;
}

17.ie7的1px dotted 边框变成dashed边框的bug,影响版本ie7, 当设置了1px dotted边框后，有一个边框的宽度大于1px 的话其它为1px边框会变为dashed的样式，具体请看http://haslayout.net/css/ie7-1px-Dotted-Border-Appears-As-Dashed-Bug

18.overflow bug,影响版本ie6/ie7，当设置了overflow:hidden或auto的元素，如果子元素设置了相对定位，overflow就不起作用了，表现的是visible的样式，http://haslayout.net/css/relative-overflow-failure-bug
解决方法是给父元素加一个position:relative;

19.th没有继承text-align属性的bug，影响版本ie8，当给table设置text-align时，th没有继承样式，http://haslayout.net/css/non-inherited-th-text-align-bug
解决方法:给th设置text-align:inherit;来解决ie8下这个丑陋的bug。

20.text-align bug, 影响版本ie6/7, 当容器外面设置了text-align，如果容器里面有文本和其他block的元素, block的元素也会继承text-align，这是不正确的，http://haslayout.net/css/Text-Align-Bug
解决方法是重新写出合理的有语义的markup，如文本外面加一个p.

21.32个style限制，影响版本ie6/7/8, 在32个"style"方法(style, link, @import)后浏览器会忽略后面的样式

22.浮动元素的阶梯bug, 影响版本ie6/7, 当给一系列<li>里面的浮动元素设置font-size后会出现阶梯效果，http://haslayout.net/css/staircase-bug
解决方案是给li设置display:inline;

23.浮动图片list标记错位bug，影响版本ie8, 当list里面有浮动的image时，list标记显示的位置跑在里面了，http://haslayout.net/css/Image-Float-Bullet-Chaos-Bug
解决方法:用背景图片代替list自带的标记

24.dt, dd, li背景消失bug, 影响版本ie6, 当给浮动的div里面的dt, dd, dl设置背景时不显示，http://haslayout.net/css/disappearing-list-background-bug
解决方案是给dt, dd, dl加上position:relative;

25.li内元素偏离 baseline 向下拉，影响版本ie8, 当给list里面的元素设置display和overflow属性后list标记会偏移，http://haslayout.net/css/list-drop-shift-bug
解决方法是给里面的元素加一个float:right; width:100% 或给li设置display:inline

26.ol数字标记不自增, 影响版本ie6/7, 当给li设置宽度时会触发这个bug，解决方法是给li设置display:list-item

27.ul/ol标记消失bug, 影响版本ie6/7, 当ul/ol触发了layout并且有margin-left会触发这个bug，http://haslayout.net/css/No-Bullets-on--ul--and--ol--Bug
解决方案是给li设置margin-left（不要加在ul/ol上）

28.图片不垂直居中，影响版本ie6/7, 当使用line-height来居中图片时在ie6/7下不会生效，http://haslayout.net/css/No-line-height-Vertical-Center-on-Images-Bug
解决方法是在img后加一个有layout的空白元素如<span></span>

29.图片label bug，影响版本ie6/ie7/ie8，当label中有img的时候无法触发点击选中form元素事件.
demo http://haslayout.net/demos/Image-Label-Focus-Bug-Demo.html
fix demo http://haslayout.net/demos/Image-Label-Focus-Bug-Fixed-Demo-CMS.html
解决方案：通过给<label>内加入一个空的span标签，然后设置 position:absolute；background:url(#); 设置label float:left; position:relative;overflow:hidden;就可以解决了

30.使用filter处理的透明背景图片的透明部分不可点bug, 影响版本ie6/7/8，当给一个display:block元素使用filter来支持png透明的时候，透明区域无法点击，http://haslayout.net/css/no-transparency-click-bug
解决方法是不要使用 background:none;filter…，而是background:url(#);filter…

31.白色背景hover bug，影响版本ie7, 给hover设置background-color:#ffffff;时，背景不会改变，http://haslayout.net/css/hover-white-background-ignore-bug
解决方法是设置background:#ffffff;

32.png图片和背景颜色不一致，影响版本ie6/7/8, 设置背景颜色和png图片背景同样的颜色代码最后表现不一致，http://haslayout.net/css/PNG-Image-and-Background-Color-Mismatch
原来是因为ie支持"PNG Gamma profiles"，解决方案是通过一个pngcrush程序来优化图片。

33.没有背景图片bug, 影响版本ie6/7/8, 当使用background的时候如果在url()后没有加空格背景图片就不会显示。

34.背景溢出,拖动滚动条后显示正常 bug, 影响版本ie6, 一个容器里面有浮动元素并且通过加一个clear:both的额外div来清除浮动会产生此bug，http://haslayout.net/css/Leaking-Background-Bug
解决方案就是建议尽量不要通过增加一个 clear:both的div来清除浮动，可以通过在外层加上overflow:hidden;对于ie可以通过加上zoom:1；来触发ie的 layout

35.自定义鼠标bug, 影响版本ie6/7/8, 当自定义鼠标样式的时候，如果url()里面的路径是相对路径的话，ie会认为相对于当前文档而不会出现鼠标样式的图片，http://haslayout.net/css/Custom-Cursor-Bug
解决方法是采用绝对路径。

36.高度扩展bug, 影响版本ie6, 当高度很窄如小于12px时ie6会扩展高度，http://haslayout.net/css/Expanding-Height-Bug
解决方法是设置overlfow:hidden或font-size:0;

37.宽度扩展bug, 影响版本ie6, 当连续英文字符的时候设定宽度不起作用，http://haslayout.net/css/Expanding-Width-Bug
解决方法是设置overflow:hidden或word-wrap:break-word;

38.㈠ 3px间距bug, 影响版本ie6, 当几个连续浮动且有layout的元素排列时会有3px的间距，http://haslayout.net/css/3px-Gap-Bug-aka-Text-Jog-Bug
解决方法就是给这些元素设置3px的负margin或加上 overflow:hidden;

㈡ IE6/7 下li的3px间隙，解决方法：设置li的vertical-align，值可以为top ¦ text-top ¦ middle ¦ bottom ¦ text-bottom

39.noscript样式bug, 影响版本ie6/7/8, 当js可用的时候如果给noscript设置border和背景都可以显示，http://haslayout.net/css/noscript-ghost-bug
解决方法就是通过给noscript设置display:none;

40.百分比padding垂直margin bug，影响版本ie8,当父元素设置了百分比的padding，子元素有垂直的margin的时候，就好像父元素被设置了margin一样，解决方法是给父元素加一个overflow:hidden/auto

41.auto margin居中bug, 影响版本ie6/7/8, 给block元素设置margin auto无法居中，http://haslayout.net/css/no-auto-margin-center-pseudo-bug
出现这种bug的原因通常是没有Doctype，然后触发了ie的quirks mode，加上<!DOCTYPE html>就可以了。

42.表单元素双margin bug,影响版本ie6/ie7,input和textarea或许会继承父元素的水平的margin
具体请看 http://haslayout.net/css/Form-Control-Double-Margin-Bug

43.浮动双margin，影响版本ie6, 当给一个浮动元素设置margin-left或margin-right时margin加倍，解决方法是加上一条display:inline;

44.负margin bug, 影响版本ie6/7, 当给一个有layout容器里面的元素设置负marin时内容会被截断，http://haslayout.net/css/Negative-Margin-Bug
解决方法是不让容器有layout或者给负marin的元素layout并设置 position:relative;

45.设置margin auto的button没有居中，影响版本ie8，ie8下如果给像button这样的标签（如button, input[type="button"], input[type="submit"]）设置{ display:block; margin-left:auto; margin-right:auto; }如果不设置宽度的话无法居中。
demo http://haslayout.net/demos/No-Auto-Margin-Center-on-Buttons-Inconsistency-Fixed-Demo-CS.html
解决方案：可以给button加上宽度，或是通过js，
var buttons = document.getElementsByTagName('button'); for ( var i = 0; i < buttons.length; i++ ) {
buttons[i].style.width = buttons[i].offsetWidth + 'px';
}

46.ie6下li里有hover行为时li高度会增大。解决方法：重设li的padding-top为0或不要让li拥有layout。

47.在ie6中，当文字和img、input、textarea、select、object等对象在同一个容器中的时候，line-height属性在这些非文字的对象中就会失效。
解决方法：设置非文字的对象的样式：
_margin: (容器的line-height – 对象本身的高度)/2px 0;
vertical-align:middle;
或者对包含文字的标签设置layout。 

48.ie中iframe会出现默认的白色背景及边框，而 Firefox和 Chrome默认背景色为透明色。
解决方法：首先，设置 iframe的 style="background-color:transparent; border:0;"；然后设置iframe属性 allowTransparency = true。

49.ie6/7中 a元素内嵌套一层或多层内联元素, 最终的内联元素包含一个img元素, 如果触发了a元素以内的 img元素的任何一个父元素的hasLayout, 那么超链接将失效。
解决方法：
1.不触发a元素下的内联元素的hasLayout；2.将img元素进行定位(不设置位置属性), 并将其z-index设置为负数。