【转】IE css bug搜集及解决办法-白红宇

【转】IE css bug搜集及解决办法

阅读量：7103 次

发布时间：2019-06-28

本文共 8668 字，大约阅读时间需要 28 分钟。

#目录1：li边距“无故”增加2：分页数字 字体用“Arial ”加粗不抖动3：IE6 CSS选择器区分IE64：IE6最小高度5：IE6100% 高度6：IE6躲猫猫bug7: IE6绝对定位元素的1像素间距bug8: IE下z-index的bug9: Overflow Bug10: 横向列表宽度bug11: 列表阶梯bug12: 垂直列表间隙bug13: IE6调整窗口大小的 Bug14: 文本重复Bug15：链接a的title属性中的文字换行16：如何去掉点击链接时的虚线17:制作1px细线表格18：IE6 下z-index无效19：css reset中的list-style:none20：链接去边线（完全兼容）

转载的！

1：li边距“无故”增加

任何事情都是有原因的，li边距也不例外。

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

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>无标题文档</title>

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;

}

</style>

</head>

<body>

</body>

</html>

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;}

sp;{color:blue;}

5：IE6100% 高度

在IE6下，如果要给元素定义100%高度，必须要明确定义它的父级元素的高度，如果你需要给元素定义满屏的高度，就得

先给html和body定义height:100%;。

sp;{color:blue;}

6：IE6躲猫猫bug

在IE6和IE7下，躲猫猫bug是一个非常恼人的问题。一个撑破了容器的浮动元素，如果在他之后有不浮动的内容，并且有一

些定义了:hover的链接，当鼠标移到那些链接上时，在IE6下就会触发躲猫猫。

解决方法很简单：

1.在（那个未浮动的）内容之后添加一个<span style="clear: both;"> </span>

2.触发包含了这些链接的容器的hasLayout，一个简单的方法就是给其定义height:1%;

7:IE6绝对定位元素的1像素间距bug

IE6下的这个错误是由于进位处理误差造成（IE7已修复），当绝对定位元素的父元素高或宽为奇数时，bottom和right会

产生错误。唯一的解决办法就是给父元素定义明确的高宽值，但对于液态布局没有完美的解决方法。

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>）之间添加空隙。

解决方法：把<a>flaot并且清除float来解决这个问题；另外一个办法就是触发<a>的hasLayout（如定义高宽、

使用zoom:1;）；也可以给<li> 定义display:inline;来解决此问题；另外还有一个极有趣的方法，给包含的文

本末尾添加一个空格。

13: IE6调整窗口大小的 Bug

当把body居中放置，改变IE浏览器大小的时候，任何在body里面的相对定位元素都会固定不动了。解决办法：

给body定义position:relative;就行了。

14: 文本重复Bug

在IE6中，一些隐藏的元素（如注释、display:none;的元素）被包含在一个浮动元素里，就有可能引发文本重复bug。

解决办法：给浮动元素添加display:inline;。

15：链接a的title属性中的文字换行

我们都知道，可以给链接a加上title属性，这样鼠标移动上去会显示title属性定义的文字，常常用来加一些提示语句，

比如说点击查看详情之类的，代码形如：

。之前一直没有仔细注意过这个东西。如果鼠标浮动上去要显示更多东西的话，怎么实现呢。第一反应是jquery的tooltip插件。今天无意中发现某个学院的网站鼠标移动上去可以显示这么完整的信息，效果看起来似乎还可以，就想看看怎么做的，找了下，没发现有Javascript脚本，再往链接的地方一看，终于让我发现了门道了：

<a href='#' target="_blank" title="标题: 关于对我校2006年至2009年发展党员工作情况进…

发布日期: 2010-5-31 16:05:08类别：院务通知点击: 139">

[05-31] 关于对我校2006年至2009年发展党员工作情况进…

</a>

注意到了吗。。很简单，只要使用这样的转义符号,即可实现换行。在一些tooltip要求定制性不高的情况下，这样的显示效果相当不错，而且是浏览器原生的效果，安逸。

哎，虽然号称精通div+css，但是发现一些小小但是很实用的技巧自己还不知道，看来html还有很多东西可以挖掘。

16：如何去掉点击链接时的虚线

解决方案1：在<a href="http://blog.sina.com/wangfengteacher"onFocus="this.blur()> Mike blog</a>

解决方案2：在标签中加入 hidefocus<a href="http://blog.sina.com/wangfengteacher"hidefocus> Mike blog</a>

解决方案3: 如果连接太多，可以用外部链接 .HTC 文件。如，blur.htc

文件内容如下：

<public:attach event="onfocus"

onevent="makeblur()"></public:attach>

function makeblur(){

this.blur();

}

</SCRIPT>

在 CSS 中加入如下代码：

A { behavior:url(blur.htc); }

解决方案4 ( 推荐 )：使用CSS样式，可加入代码：a {blr:expression_r(this.onFocus=this.blur())}

如果是FF等浏览器的话可这样写 a{ouline:none;}

17:制作1px细线表格

解决方案1 ( 推荐)：我们只要给这个table一个border-collapse:collapse的样式，就可以达到这个效果了。

具体如下：

1、HTML结构:

<table width="300" border="1" cellpadding="0"cellspacing="0" bordercolor="#C0C0C0"

style="border-collapse:collapse;">

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

18：IE6 下z-index无效

在CSS中，通过z-index这个属性改变层级，要让z-index起作用有个前提，就是元素的position属性要是 relative，absolute或是fixed。

z-index层级越高，内容越应该在上面显示。在大部分的浏览器在大部分的情况下，确实如此，但是不绝对，尤其遇到IE6。

1、关于效果截图的些必要说明

下面的不是废话，是为了更容易的理解我下面唾沫横飞的内容。

以下所有结果截图的大背景如下：

1、页面上固定不动的，一成不变的，送豪宅也不会从良的是一个黑色背景，透明度 40%，几乎满屏显示的层级为1的绝对定位层。HTML为：

对应CSS 为：#blank{width:100%; height:600px; background:black; opacity:0.4; filter:alpha(opacity=40); position:absolute; left:0; top:0; z-index:1;}

作用是为了让层级关系一目了然。看：

这说明内容在z-index为1的绝对定位层之下。

这说明内容在z-index为1的绝对定位层之上。

2、页面上做对比的是美女图片，图片在半透明黑色绝对定位层的上面还是下面很容易辨别，这样，您就能够对我所说的z- index不起作用有很直观的认识了。

2、IE6的抱怨：浮动让我沉沦

现在开始真正的讲述问题的产生，原因以及解决了。首先讲讲第一种z-index无论设置多高都不起作用情况。这种情况发生的条件有三个：1、父标签 position属性为relative；2、问题标签无position属性（不包括static）；3、问题标签含有浮动(float)属性。

您可以拿下面的代码自己做个简单测试：

</div>

丫的，这z-index都9999了，层级够高吧，但是，看下面的图：

这一对比就知道问题了，可能有人会疑问，这会不会是IE6的relative自己感冒了，而不是浮动(float)携带了“甲流病毒”。好，我现在去掉浮动，HTML代码如下：

</div>

结果IE6下：

我想，问题应该都清楚了，至于原因，我起初以为是haslayout搞的鬼，后来，用zoom一测试，发现不是（IE7 下无此bug也证明不是 haslayout的原因），似乎就是这个float会让z-index失效。由于将外部div的position:relative属性改为 absolute可以解决这一问题，我就怀疑是不是浮动让relative发生了些变化，float与relative在水平定位上可以说是近亲，会不会是因为这两者搅和在一起所以什么“畸形”“体弱多病”就出现了。这仅是我的猜测而已，真正的原因还是去问IE6的后妈吧。

解决方法，解决方法有三，1、position:relative改为position:absolute；2、去除浮动；3、浮动元素添加 position属性（如relative，absolute等）。

3、固执的IE6：它只认第一个爸爸

可能不少人知道，这IE6下，层级的高低不仅要看自己，还要看自己的老爸这个后台是否够硬。用术语具体描述为：

父标签position属性为relative 或absolute时，子标签的absolute属性是相对于父标签而言的。而在IE6下，层级的表现有时候不是看子标签的z-index多高，而要看它们的父标签的z-index谁高谁低。

有一定经验的人可能都知道上面的事实。但是，相信这里面很多人不知道IE6下，决定层级高低的不是当前的父标签，而是整个DOM tree（节点树）的第一个relative属性的父标签。有时平时我们多处理一个父标签，z-index层级多而复杂的情况不多见，所以难免会有认识上的小小偏差。

好，下面展示这个bug。

条件很简单，只要绝对定位的第一个元素的第一个爸爸，或者说是最老的那个爸爸级别的人的relative属性小于黑色半透明层的z-index层级。例如下面的HTML代码：

</div>

可以看到，mm3图片的父标签div 是绝对定位，层级9999，比1大多了，绝对定位的父标签层级1000(10000也一样)，也比黑色半透明层的z-index:1大多了，但是，我们可怜的IE6童鞋——

再看看以Firefox为代表的其他童鞋：

IE7与IE6有着同样的bug，原因很简单，虽然图片所在div当前的老爸层级很高(1000)，但是由于老爸的老爸不顶用，可怜了9999如此强势的孩子没有出头之日啊！

知道原因解决就很轻松了，给第一任老爸添加z-index后的HTML代码如下：