我收集的CSS的BUG和解决方案

最新推荐文章于 2024-04-12 05:46:30 发布

原创最新推荐文章于 2024-04-12 05:46:30 发布 · 164 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#CSS #IE #Firefox #浏览器 #XHTML

CSS相关专栏收录该内容

3 篇文章

订阅专栏

本文介绍了多种浏览器兼容性问题及解决方案，包括IE中DIV高度显示异常、超链接hover样式异常、PNG图片透明度问题等，并提供了代码示例。

1、IE中如果定义了高度小于15个像素的DIV时，高度显示为15个像素。
IE下，对容器的理解是，容器本来就是用来放置文本内容的，文本内容一定会有字体大小，默认为12px,还有行高，默认为15px，所以这个层就自然的变高了。遇到这种情况，我们将样式加入：line- height:0px; font-size:0px; 就可以解决了。火狐下没有这个问题。

2、超链接访问过后hover样式不显示的问题
改变CSS属性的排列顺序: 先后顺序标准应为：a:link—a:visited—a:hover—a:active

3、ul在Firefox和IE下表现不同
使用（padding:0; margin:0; list-style:inside;）或者（padding:0; margin:0; list-style:none;）实现兼容

4、解决IE不能正确显示透明PNG——header内加入代码
<script language="javascript">
function correctPNG()
{
for(var i=0; i<document.images.length; i++)
{
var img = document.images[i];
var imgName = img.src.toUpperCase();
if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
{
var imgID = (img.id) ? "id='" + img.id + "' " : "";
var imgClass = (img.className) ? "class='" + img.className + "' " : "";
var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' ";
var imgStyle = "display:inline-block;" + img.style.cssText;
if (img.align == "left") imgStyle = "float:left;" + imgStyle;
if (img.align == "right") imgStyle = "float:right;" + imgStyle;
if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle;
var strNewHTML = "<span " + imgID + imgClass + imgTitle;
+ " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";";
+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader";
+ "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>";
img.outerHTML = strNewHTML;
i = i-1;
}
}
}
window.attachEvent("onload", correctPNG);
</script>

5、Li中内容超过长度后以省略号显示的方法
<style type="text/css">

</style>

6、IE6的双倍边距的BUG。
解决方法：display属性设置为inline。
分析：块级对象默认的display属性值是block，当设置了浮动的同时，还设置了它的外边距就会出现这种情况。也许你会问：“为什么第二个对象和第一个对象之间就不存在双倍边距的BUG”？因为浮动都有其相对应的对象，只有相对于其父对象的浮动对象才会出现这样的问题。第一个对象是相对父对象的，而第二个对象是相对第一个对象的，所以第二个对象在设置后不会出现问题。
这个现象仅当块级对象设置了浮动属性后才会出现，内联对象（行级对象）不会出现此问题。并且只有设置左边距和右边距的值才会出问题，上下边距不会出现问题。

7、FF下文本无法撑开有固定高度容器。
标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的,那我又想固定高度，又想能被撑开需要怎样设置呢？办法就是去掉height设置min-height:200px; 这里为了照顾不认识min-height的IE6 可以这样定义：
{
height:auto!important;
height:200px;
min-height:200px;
}

8、IE6下的a:hover的bug
<style>
a {}
a span {color: green;}
a:hover {}
a:hover span {color: red; }
</style>
<a href=”http://www.taobao.com“> 淘宝网 <span> 淘你喜欢 </span></a>
在IE7/FF中，鼠标移动到链接上时，”淘你喜欢”字样会变为红色，但IE6则无反应。所以IE6的bug就是如果a 与 a:hover 的css定义是一样的，也就是说如果a:hover 中没有样式的改变，hover就不会被触发。但如果在a:hover{}增加一些特定的属性，例如
a:hover{border:none;}或者a:hover{padding:0;}又或者a:hover{background: none;}
此时hover就可以触发了。这样的属性还包括direction/text-align/text-indent/float/overflow/position …… 等等。我在数码产品畅销榜页面就是选择了使用border:none。

9、层的自动高度实现
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>div自动高度</title>
<style type="text/css">

</style>
</head>
<body>
<h4>利用clear自动高度，因为TOP层有下边界</h4>
<div class="con line">
<div class="top line"></div>
<div class="top line"></div>
<div class="top line"></div>
<div class="top line"></div>
<div class="top line"></div>
<div class="top line"></div>
<div class="cl"></div>
</div>
<h4>利用overflow和高度的自动高度实现，无下边界的情况</h4>
<div class="con1 line">
<div class="top1 line"></div>
<div class="top1 line"></div>
<div class="top1 line"></div>
<div class="top1 line"></div>
<div class="top1 line"></div>
<div class="top1 line"></div>
</div>
</body>
</html>

10、HTML注释引发的IE6文字溢出和浮动BUG。
不要再两个浮动层之间加注释，去掉注释或者将注释写在层内。