小弟我收集的CSS的BUG和解决方案
日期：2014-05-17 浏览次数：20658 次
我收集的CSS的BUG和解决方案
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">
<!--
li{
width:200px;
white-space:nowrap;
text-overflow:ellipsis;
-o-text-overflow:ellipsis;
overflow: hidden;
}
-->
</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">
<!--
.line{ border: 1px dashed #333;}
.con {margin:auto; background-color:#FFFFCC;}
.top{ height:200px; width:80%; background-color:#eee; marg
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">
<!--
li{
width:200px;
white-space:nowrap;
text-overflow:ellipsis;
-o-text-overflow:ellipsis;
overflow: hidden;
}
-->
</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">
<!--
.line{ border: 1px dashed #333;}
.con {margin:auto; background-color:#FFFFCC;}
.top{ height:200px; width:80%; background-color:#eee; marg
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
