各种CSS bug与技艺-HTML教程-爱易网页

各种CSS bug与技艺

日期：2014-05-17　浏览次数：20720 次

各种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

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

各种CSS bug与技艺

相关资料更多>

推荐阅读更多>