ie6常见css bug

IE6双倍边距bug

在IE6下如果某个标签使用了float属性，同时设置了其外补丁“margin:0 10px”可以看出，但第一个对象距左边有20px。

说明：这是因为块级对象默认的display属性值是block，当设置了浮动的同时，还设置了它的外边距就会出现这种情况。也许你会问：“为什么第二个对象和第一个对象之间就不存在双倍边距的BUG”？因为浮动都有其相对应的对象，只有相对于其父对象的浮动对象才会出现这样的问题。第一个对象是相对父对象的，而第二个对象是相对第一个对象的，所以第二个对象在设置后不会出现问题。另外在一些特殊布局中，可能需要组合使用display:block;和display:inline;才能达到预期效果。

3像素问题及解决办法

当使用float浮动容器后，在IE6下会产生3px的空隙。

解决方法：a.对另一个元素同时使用float； b.为已经浮动的div添加一条语句：margin-right:-3px; ；

当子元素浮动且未知高度时，怎么使父容器适应子元素的高度？

这种情况可在父窗口加上 overflow:auto;zoom:1;这两个样式属性，overflow:auto;是让父容器来自适应内部容器的高度，zoom:1;是为了兼容 IE6而使用的CSS HACK。zoom:1;通不过W3C的验证，这也是遗憾的一点，幸好IE支持<!--[if IE]>这种写法，可以专门针对IE来写单独的样式，所以可以把这个属性写在页面内的<!--[if IE]>中，这样应该可以通过验证了。

超链接访问过后hover样式就不出现的问题

被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题，解决方法是改变CSS属性的排列顺序: L-V-H-A
a:link {color: #1f3a87; text-decoration:none;}
a:visited {color: #83006f;text-decoration:none;}
a:hover {color: #bc2931; text-decoration:underline;}
a:active {color: #bc2931;}

IE6文字溢出BUG
说明：注释造成文字溢出是IE的BUG。

一个空格引发CSS失效p:first-letter {font-size:300%}
这段代码对<p>的首字符样式定义在IE6上看是没有效果的（IE7没测试），而在p:first-letter和{font- size:300%}加上空格，也就是p:first-letter {font-size:300%}后，显示就正常了。但是同样的代码，在FireFox下看是正常的。按道理说，p:first- letter{font-size:300%}的写法是没错的。那么问题出在哪里呢？答案是伪类中的连字符"-"。IE有个BUG，在处理伪类时，如果伪类的名称中带有连字符"-"，伪类名称后面就得跟一个空格，不然样式的定义就无效。而在FF中，加不加空格都可以正常处理。

IE6中奇数宽高的BUG
IE6还有奇数宽高的bug，解决方案就是将外部相对定位的div宽度改成偶数。

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#out { width: 609px;/*这里宽度为奇数，bug就出现了！！改成偶数就OK了*/ height: 300px; position: relative; background:#FF0000; color:#FFF; }
#inn { width: 200px; height: 250px; position: absolute; top: 0px; right: 0px; background:#000000; }
</style>       
</head>       
<body>
<div id="out">
    <div id="inn">此处为内部绝对定位的 DIV</div>
</div>
</body>       
</html>

IE6下为什么图片下方有空隙产生

<div style="border:1px solid red;">
<img src="http://www.google.com/intl/en_ALL/images/logo.gif" alt="google" style="width:276px;height:110px" />
</div>

解决这个BUG的方法也有很多，可以是改变html的排版，或者定义img 为display:block
或者定义vertical-align属性值为vertical-align:top | bottom |middle |text-bottom
还可以设置父容器的字体大小为零，font-size:0

ie6下空标签高度问题
一个空div如果高度设置为0到19px，IE6下高度默认始终19PX。
例如：
.c{height:0px;/*给定任何小于20px的高度 */}
<div></div>

如果不让它默认为19PX。而是0PX的话
解决方法有3种：
1.css里面加上overflow:hidden;
2.div里面加上注释,
<div><!– –></div>
3.css里面加上line-height:0;然后div里面加上#nbsp;,
<div> </div>(#换成&)

修正重复文字bug

复杂的布局可以触发在浮动元素的最后一些字符可能出现在出现在清除元素下面的bug。这里有几个解决方法，有些是完美的，但是做一些反复试验也是必须的：

确保所有的元素使用”display:inline;”
在最后一个元素上使用一个”margin-right:-3px;”
# 为浮动元素的最后一个条目使用一个条件注释，比如：
<!–[if !IE]>Put your commentary in here…<![endif]–>
在容器的最后元素使用一个空的div(它也有必要设置宽度为90%或类似宽度。)

IE6下最小高度和宽度

.demo {
    /*设置元素的最小高度和最小宽度*/
    min-height: 100px;
    height: auto !important;/*现代浏览器下，内容高度超过100px时自动获得其高度*/
    height: 100px;
    /*此值设置和min-height值一样，因为IE6下元素高度会根据内容自己的高度而定，
    所以内容高度低于min-height值时，为了达到min-height效果，需要给元素一个显式的高度值*/
}

IE6 a:hover失效

a:hover { zoom:1}/*要解决这个问题就必须触发a:hover的layout，例如a:hover { display:inline-block}或者a:hover { zoom:1}等等。*/
a:hover span{color:#F00;}

<a href="#">鼠标经过时改变我的<span>颜色</span></a>

IE6/IE7下：块元素(li) inline-block解决方案

1、inline元素(比如span,em等)的display属性设置为inline-block时，所有的浏览器都支持；

2、block元素的display属性设置为inline-block时，IE6/IE7浏览器是不支持的；

<div class="list">
  <span>无标题文档无标题文档</span>
  <span>无标题文档无标题文档</span>
  <span>无标题文档无标题文档</span>
  <span>无标题文档无标题文档</span>
</div>
<ul class="list1">
  <li>无标题文档无标题文档</li>
  <li>无标题文档无标题文档</li>
  <li>无标题文档无标题文档</li>
  <li>无标题文档无标题文档</li>
  <li>无标题文档无标题文档</li>
</ul>
<style>
.list{width:350px; border:1px solid #ccc;}
.list span{display:inline-block;width:150px; margin-left:20px;}
.list1{width:500px;border:1px solid #CCC; margin-top:20px;}
.list1 li{display:inline-block; width:150px; }
</style>

如果是内联元素使用了inline-block，那所有的浏览器显示都是正常的。（ie6、ie7中对内联元素使用display:inline-block，IE是不识别的，但使用display:inline-block在IE下会触发layout，从而使内联元素拥有了display:inline-block属性的表征。）

但是如果是块级元素使用了inline-block，那在ie6和ie7中是有问题的。（ie6/ie7中块元素仅仅是被display:inline-block触发了layout，而它本身就是行布局，所以触发后，块元素依然还是行布局，而不会像火狐等其他浏览器块元素呈递为内联对象。）
那么，ie6/ie7下块元素如何实现display:inline-block的效果？解决方法如下：
让标准浏览器识别display:inline-block;让ie6/7识别display:inline;来覆盖上面的display:inline-block;然后通过zoom:1;来触发haslayout让inline元素在ie中表现得和inline-block元素一样。
.list1 li{display:inline-block; width:150px; *zoom:1;*display:inline;}
加上*zoom:1(触发ie6和ie7下的haslayout);*display:inline(只有ie6和ie7识别);
注：一定要加在display:inline-block;后面。

IE6不支持first-child的解决方法

.sidebar_block:first-child { margin:0; }
.sidebar_block { * margin-top: expression(this.previousSibling==null?'0':'0px'); }

参考链接：http://kayosite.com/ie6-common-css-bug.html

posted @ 2014-11-19 17:47 eaysun 阅读(212) 评论(0) 编辑收藏举报

刷新页面返回顶部

Eaysun

ie6常见css bug

公告