日期:2014-05-17  浏览次数:20594 次

各种CSS bug与技巧
1、容器不扩展问题
这个是经常在我切图的时候遇到的问题,如:
<!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=utf-8" />
<title>容器不扩展问题(www.poluoluo.com 破洛洛)</title>
<style type="text/css">
#divGroup{ border:2px solid #333;}
#a,#b{ border:2px solid #333; float:left; margin:5px;}
</style>
</head>
<body>
<div id="divGroup">
    <div id="a">子容器a</div>
    <div id="b">子容器b</div>
</div>
</body>
</html>


解决办法:在divGroup里面加上overflow:hidden;zoom:1;
ps:很多人都是在里面加个清除浮动空标签来解决,其实这个是错误办法。太增加代码量了

2、margin双边距问题
<!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=utf-8" />
<title>FF下如何使连续长字段自动换行(www.poluoluo.com 破洛洛)</title>
<style type="text/css">
body {
 margin:0
 }
div {
 float:left;
 margin-left:10px;
 width:200px;
 height:200px;
 border:1px solid red
 }
</style>
</head>
</script>
<body>
<div>
<a href="#">
www.poluoluo.com 破洛洛www.poluoluo.com 破洛洛www.poluoluo.com 破洛洛www.poluoluo.com 破洛洛
</a>
</div>
</body>
</html>


设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。
解决办法是在这个div里面加上display:inline;
ps:我一般很少用margin,一般情况用padding来控制边距,以免出现另外的bug

3、关于容器的包涵关系
  很多时候,尤其是容器内有平行布局,例如两、三个float的div时,宽度很容易出现问题。在IE中,外层的宽度会被内层更宽的div挤破。一定要用Photoshop或者Firework量取像素级的精度。

4、关于高度的问题
  如果是动态地添加内容,高度最好不要定义。浏览器可以自动伸缩,然而如果是静态的内容,高度最好定好。(似乎有时候不会自动往下撑开,不知道具体怎么回事

5、最狠的手段 – !important;
  如果实在没有办法解决一些细节问题,可以用这个方法.FF对于”!important”会自动优先解析,然而IE则会忽略.如下

   1. .tabd1{
   2. background:url(/res/images/up/tab1.gif) no-repeat 0px 0px !important; /*Style for FF*/
   3. background:url(/res/images/up/tab1.gif) no-repeat 1px 0px; /* Style for IE */}

  值得注意的是,一定要将xxxx !important 这句放置在另一句之上。

6、IE6躲猫猫bug
<!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=utf-8" />
<title>躲猫猫bug(www.poluoluo.com 破洛洛)</title>
<style type="text/css">
#holder{
background-color:pink;  /***引起bug的重要因素,一种解释就是:那些消失的文字躲到了背景之后***/
/*** width:100%; 对最大的容器设置宽度,相对宽度和绝对宽度都可以,即可修正bug ***/
}
#holder a:hover{
background-color:deeppink; /***为了增强视觉效果而已,可以去掉。***/
}
#floater{
float:right;   /***引起bug的重要因素***/
width:135px;
height:310px; /***引起bug的重要因素,高度一定要大于那些文字的高度***/
border:1px solid green;
}
.clear{
clear:both;  /***引起bug的重要因素***/
}
#footer{ /***为了增强视觉效果而已,可以去掉。***/
height:50px;
border-top:1px solid blue;
}
</style>
</head>
<body>
<div id="holder">
<div id="floater">
躲猫猫bug<br/ />
<a href="#" title=""><img alt="躲猫猫bug" src="/jzxy/UploadFiles_333/200911/20091118142230122.gif" /></a>
</div><!--end: floater -->
<div id="ghostHolder">
这个示例是为了演示IE6的“躲猫猫bug”,如果你用IE6浏览器浏览这个页面的时候,就会发现你看不到这些字了 囧rz~ 。<br/ />
IE7已经修正了这个bug,所以你用IE7浏览这个页面的时候,就能看到这些文字啦。<br/ />
躲猫猫bug躲猫猫bug躲猫猫bug躲猫猫bug躲猫猫bug躲猫猫b躲猫猫b躲猫猫bugug躲猫猫bug躲猫猫bug躲猫猫bug躲猫猫bug躲猫猫bug躲猫猫bug躲猫猫bug躲猫猫b躲猫猫bug躲猫猫bug躲猫猫bugug躲猫猫bug躲猫猫bug躲猫猫bug躲猫猫bug
<ul style="list-style-type: disc">
<li><a title="躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu" href="#">躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu</a> </li>
<li><a title="躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu躲猫猫bu" href