正常情况下，插入一张图片，会发现下图中的效果显示出现一条高度为3px的线。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box{width: 800px;background: #f00; }
</style>
</head>
<body>
<div class="box">
<img src="images/4.jpg" alt=""/>
</div>
</body>
</html>
为了解决这个问题，需要加入以下语句
.box img {display: block;}
双倍浮向的例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{margin: 0;padding:0;}
.box{width: 800px;background: #f00; margin-bottom: 20px;}
.box img {display: block;}
.box2{width: 100px;height: 100px; background:#0f0; float: left; margin-left: 100px;}
</style>
</head>
<body>
<div class="box">
<img src="images/4.jpg" alt=""/>
</div>
<div class="box2"></div>
</body>
</html>
解决方法是在浮动元素里添加display：inline；
.box2{width: 100px;height: 100px; background:#0f0; float: left; margin-left: 100px; _display: inline;}
默认高度例子
.box3{width: 800px; height: 5px; background: #00f; clear: both;}
<div class="box3"></div>这里的clear: both; 是清除box3这个元素两边的浮动。
然而在IE6浏览器下，会出现下面这种情况：
即，IE6浏览器不允许出现低于18px的div。因为它认为里面需要放内容，最小的文字是12或者14px，因此IE6不允许出现这种情况。
上面这种情况的解决方案就是添加font-size:0（较少使用，因为将文字清零了，对后续的元素继承有影响。）或者overflow：hidden（推荐使用）。
按钮元素默认不一的例子
下面两种方法来设置按钮并且保持一致。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{margin: 0;padding:0;}
.inpt{display: block; width: 80px;height: 30px; border: 1px #000 solid; background: #00f; color: #fff; text-decoration: none;
text-align: center; line-height: 30px; font-size: 14px;}
</style>
</head>
<body>
<a href="#" class="inpt">提交</a>
<input type="sumit" value="提交" class="inpt" />
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box1{ width: 50%; height: 100px; background: #f00; float: left;}
.box2{ width: 50%; height: 100px; background: #0f0; float: left;}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
高版本浏览器下是正常显示：
且随着浏览器窗口大小的变化而调整。
然而，在IE6浏览器下，会出现“百分比bug”
在右边的元素里添加clear：right；，从而解决“百分比bug”。
<style type="text/css">
.box1{ width: 50%; height: 100px; background: #f00; float: left;}
.box2{ width: 50%; height: 100px; background: #0f0; float: left; clear: right;}
</style>
鼠标指针bug例子
<div style="cursor: hand;">北京欢迎你！</div>
<div style="cursor: pointer;">北京欢迎你！</div>
透明属性
下面这种情况在高版本的浏览器中正常显示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box{width: 100px; height: 100px; background: #f00; opacity: 0.5;}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
在低版本中不能正常显示，解决方案是在元素后面添加：
filter: alpha(opacity=50);
<style type="text/css">
.box{width: 100px; height: 100px; background: #f00; opacity: 0.5; filter: alpha(opacity=50); }
</style>
另外，opacity这个属性可以让子元素继承。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box{width: 100px; height: 100px; background: #f00; _background: #0f0;}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
在高版本中的浏览器，直接读取前面的背景色代码，解析不了后面的_background：#0f0的代码。但是，在IE6版本的浏览器中，就可以解析带下划线的这句代码。
!important过滤器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box{width: 100px; height: 100px; background: #ff0!important; background: #f00; _background: #0f0;}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
结果显示的是background：#ff0!important；(黄色)的背景色。因为!important让background具有最高优先级。
*过滤器
如下面代码中的
*background：#00f；
在IE7里面专门显示成 蓝色 。
<style type="text/css">
.box{width: 100px; height: 100px; background: #ff0!important; background: #f00; *background: #00f; _background: #0f0;}
</style>
网友评论