关于IE的bug(CSS)

 在开发中我们常会在ie中遇到很多莫名的bug,尤其是ie6这个早就该退出历史的浏览器。刚刚在haslayout.net上看到有总结ie的一些bug,分享一下。

1.图片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;就可以解决了
2.设置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’;
}
另一种解决方案:
<form action=”">
<div>
<button>This button should be centered</button>
<div class=”ie_fix”>
<input type=”button” value=”This button should be centered”>
</div>
<input type=”text”>
<input type=”checkbox”>
<input type=”radio”>
<div class=”ie_fix”>
<input type=”submit” value=”This button should be centered”>
</div>
<input type=”file”>
<select><option>test</option></select>
</div>
</form>
button, select, input {
display: block;
margin-left: auto;
margin-right: auto;
width: auto;
}
.ie_fix {
text-align: center;
}
.ie_fix input[type="submit"],
.ie_fix input[type="button"] {
display: inline-block;
}
<!–[if IE 8]>
<style type=”text/css”>
button { display: table; }
</style>
<![endif]–>
给 input[type="button"] input[type="submit"]加上一个额外的标签,并设置display:inline-block;
并通过条件注释给ie8下设置button display:table;
3.不正确的浮动伸展布局,影响版本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
4.文档滚动bug,影响版本ie6/ie7,不在html标签上设置overflow或许会影响到body上面的overflow
具体请看http://haslayout.net/css/Document-Scrollbars-Overflow-Inconsistency
5.连续浮动元素bug,影响版本ie6/ie7,http://haslayout.net/css/Float-Squeeze-Weird-Gap-Bug
6.连续浮动字符出现重复字符,影响版本ie6/ie7,http://haslayout.net/css/Float-Squeeze-Duplicate-Last-Character-Bug
这个和5的解决方案都差不多,5是通过加一个宽度,而这个是通过给浮动字符加一个position:relative;
7.空元素高度bug,影响版本ie6/ie7,有layout的空元素获得了高度
<div></div>div {
background: blue;
width: 100%; /* to give “layout”  */
}
解决办法:
div {
height: 0;
overflow: hidden;
background: blue;
width: 100%; /* this is just what we originaly had as “layout” giver */
}
8.表单元素双margin bug,影响版本ie6/ie7,input和textarea或许会继承父元素的水平的margin
具体请看http://haslayout.net/css/Form-Control-Double-Margin-Bug
9.ie7的1px dotted 边框变成dashed边框的bug,影响版本ie7, 当设置了1px dotted边框后,有一个边框的宽度大于1px
的话其它为1px边框会变为dashed的样式,具体请看http://haslayout.net/css/IE7-1px-Dotted-Border-Appears-As-Dashed-Bug
10.overflow bug,影响版本ie6/ie7,当设置了overflow:hidden或auto的元素,如果子元素设置了相对定位,overflow就不起作用了,
表现的是visible的样式,解决方法是给父元素加一个position:relative;
11.ie7的坏的:hover 绝对定位bug,影响版本ie7, 当子元素设置了absolute并且通过设置left top 等来通过:hover时改变其显
示位置时将会不起作用如果他们不再父元素的可视范围内,解决方法是给其加上margin-left:0%;
12.当:active时Button背景偏移,影响版本ie8,给button设置:active时背景会做偏移,可以通过设置 :active时的-ms-background-position-x和-ms-background-position-y来改变这个偏移。
13.:hover边框消失bug,影响版本ie8, 当设置了outline的元素后,再设置:hover的时候,如果设置边框的话,将会不显示
14.百分比padding垂直margin bug,影响版本ie8,当父元素设置了百分比的padding,子元素有垂直的margin的时候,
就好像父元素被设置了margin一样,解决方法是给父元素加一个overflow:hidden/auto
15.待续…

你可能感兴趣的:(开发,浏览器)