IE6,IE7,IE8 CSS Bug兼容解决

2

1:li 边距“无故”增加

任何事情都是有原因的,li边距也不例外。
先描述一下具体状况:有些时候li边距会突然增 加很多,值也不固定(只在IE6/IE7有这种现象),让人摸不着头脑,仔细“研究”发现是由于其 低级元素ulpadding引 起,padding的上下值对li有影响,左右无影 响。所以只好笨手笨脚地把padding去掉,换成margin。 这是能解决问题,但往往不是我们想要的结果,或许 还会引起其他不必要的怪现象。

现在终于发现解决这个问题的方法,其实很简单,既然是有ul引 起的,就设置ul的显示形式为*display:inline-block;即可,前面加*是只 针对IE6/IE7有效,其他浏览器并不渲染这个属性。

2:分页数字 字体用“Arial ”加粗不抖动

CSS:

body, ul, h1 {
    font-family:Arial;
    font-size:12px;
}
.page {
    text-align:center;
}
.page a {
    display:inline-block;
    padding:5px 8px;
    text-decoration:none;
    border:1px solid #09F;
    background-color:#0CF;
    color:#FFF;
}
.page a:hover, .page .selected {
    border:1px solid #CCC;
    background-color:#FFF;
    color:#000;
    font-weight:bold;
}

HTML:

<h1>分页样式</h1>
<div class="page">            
    <a href="#">1</a> 
    <a href="#"class="selected">2</a> 
    <a href="#">3</a> 
    <a href="#">4</a> 
    <a href="#">5</a>
    <a href="#">6</a> 
    <a href="#">7</a> 
    <a href="#">8</a> 
    <a href="#">9</a> 
    <a href="#">10</a> 
</div>

3:IE6 CSS选择器区分IE6
IE6不支持子选择器;先针对IE6使用常规申明CSS选择器,然后再用子选择器针对IE7+及其他浏览器。
/IE6 专用 /

.content {color:red;}

/ 其他浏览器 /

div>p .content {color:blue;}

4:IE6最小高度
IE6不支持min-height属性,但它却认为height就是最小高度。解决方法:
使用IE6不支持但其余浏览器支持的属性!important

#container{min-height:200px; height:auto !important; height:200px;}

5:IE6100% 高度
IE6下,如果要给元素定义100%高度,必须要明确定义它的父级元素的高度,如果你需要给元素定义满屏的高度,就得先给htmlbody定义height:100%;

6:IE6躲猫猫bug
IE6IE7下,躲猫猫bug是一个非常恼人的问题。一个撑破了容器的浮动元素,如果在他之后有不浮动的内容,并且有一些定义了:hover的链接,当鼠标移到那些链接上时,在IE6下就会触发躲猫猫。
解决方法很简单:

  1. 在(那个未浮动的)内容之后添加一个<span style="clear: both;"> </span>
  2. 触发包含了这些链接的容器的hasLayout,一个简单的方法就是给其定义height:1%;

7:IE6绝对定位元素的1像素间距bug
IE6下的这个错误是由于进位处理误差造成(IE7已修复),当绝对定位元素的父元素高或宽为奇数时,bottomright会产生错误。唯一的解决办法就是给父元素定义明确的高宽值,但对于液态布局没有完美的解决方法。

8: IE下z-index的bug
IE浏览器中,定位元素的z-index层级是相对于各自的父级容器,所以会导致z-index出现错误的表现。

解决方法:

其父级元素定义z-index,有些情况下还需要定义position:relative

9: Overflow Bug
IE6/7中,overflow无法正确的隐藏有相对定位position:relative;的子元素。
解决方法:

给外包容器.wrap加上position:relative;

10: 横向列表宽度bug
如果你使用float:left;<li>横向摆列,并且<li>内包含的<a>(或其他)触发了 hasLayout,在IE6下就会有错误的表现。
解决方法:

<a>定义同样的float:left;

11: 列表阶梯bug
列表阶梯bug通常会在给<li>的子元素<a>使用float:left;时触发,我们本意是要做一个横向的列表(通常 是导航栏),但IE却可能呈现出垂直的或者阶梯状。
解决办法:

<li>定义float:left;而非子元素<a>,或者 给<li>定义display:inline;也可以解决。

12: 垂直列表间隙bug
当我们使用<li> 包含一个块级子元素时,IE6(IE7也有可能)会错误地给每条列表元素(<li>)之间添加空隙。
解决方法:

方法1:.clear{clear:both;}清除float来解决这个问题;
方法2:触发<a>hasLayout(如定 义高宽、:使用zoom:1;);
方法3:给<li> 定义display:inline;来解决此问题;另外还有一个极有趣的方法,给包含的文本末尾添加一个空格。

13: IE6调整窗口大小的 Bug
当把body居中放置,改变IE浏览器大小的时候,任何在body里面的相对定位元素都会固定不动了。
解决办法:

body定义position:relative;

14: 文本重复Bug
IE6中,一些隐藏的元素(如注释、display:none;的元素)被包含在一个浮动元素里,就有可能引发文本重复bug。
解决办法

给浮动元素添加display:inline;

15:如何去掉点击链接时的虚线

在 CSS 中加入如下代码:

:focus{{ouline:0;}
a,a:hover{outline:none; blur:expression(this.onFocus=this.blur());}

16:css reset中的list-style:none
IE6,7
1)当ul不具有float:left;display:inline;时,
无论有没有list-style:none这个属性,列 表符都被隐藏,不占位置
2)当ul具有float:left;display:inline;属性时,
list- style:none,列表符被隐藏,但是仍然留有位置(list-style-position:inside);
未设置list-style:none;列表符被隐藏,也不占位(list-style-position:outside)
firefox中只要list-style-type为none ,则 无论list-stype-position的值为outsideinside , list-style都能很好的被隐藏
而在IE6,7中,仅 设置list-style:none,并不足以解决所有问题

css reset的时候使用 list-style:none outside none 更好

17: IE6中伪类:hover的使用及Bug
以前未曾遇到类似的问题,一番google,才知道这是IE6处理CSS伪类:hoverBug。例如如下的代码:

a {color: #333;}
a span {color: green;}
a:hover {}
a:hover span {color: red; }

<a href=”http://www.taobao.com“> 淘宝网 <span> 淘你喜欢 </span></a>

IE7/FF中,鼠标移动到链接上时,”淘你喜欢”字样会变为红色,但IE6则无反应。所以IE6bug就是如果a 与 a:hovercss定义是一样的,也就是说如果a:hover 中没有样式的改变,hover就不会被触发。但如果在a:hover{}增加一些特定的属性,例如

a:hover{border:none;}

或者

a:hover{padding:0;}

又或者

a:hover{background: none;}

此时hover就可以触发了。

18:去掉button按钮左右两边的留白

input,button{overflow:visible;padding:0;}

<input type="submit" name="button" id="button" value="左右留白的解决方法" />

19:中文字体在css中的写法

黑体SimHei\9ED1\4F53黑体 宋体SimSun\5B8B\4F53宋体
新宋体 NSimSun\65B0\5B8B\4F53新宋体 仿宋FangSong\4EFF\5B8B仿宋
楷体KaiTi\6977\4F53 楷体
微软正黑体Microsoft JhengHei\5FAE\x8F6F\6B63\9ED1\4F53微软正黑体
微软雅黑Microsoft YaHei\5FAE\8F6F\96C5\9ED1微软雅黑 幼圆 YouYuan\5E7C\5706幼圆

20:IE6css实现max/min-width/height

_width:expression(this.width>300?"300px":ture); max-width:300px;

_height:expression(this.height>300?"300px":ture); max-height:300px;

来自 http://www.wufangbo.com/ie6-ie7-ie8-css-bug-2/


如果觉得我的文章对你有用,请随意赞赏

你可能感兴趣的

载入中...