CSS 精华-BUG 修复
大部分BUG是人为的
CSS 编写不规范，语法错误可以用 W3C CSS 检验器
http://jigsaw.w3.org/css-validator/
选择器特殊性问题,可以用FireBug解决
IMG与 line-height冲突
<style type="text/css">
div.v-align {
border: 1px solid red;
height: 200px;
line-height: 200px;
float: left;
}
div.v-align img {
padding-top: 90px; /* fix bug */
vertical-align: middle;
}
</style>
<div class="v-align">
正常
</div>
<div class="v-align">
<img src="./accept.png" />
</div>
例子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" xml:lang="en">
<head>
<title>AgiCRM</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="demo" content="Demo" />
<meta name="demo" content="demo" />
<style type="text/css">
div.v-align {
border: 1px solid red;
line-height: 40px;
float: left;
font-size: 11px;
height: 40px;
}
div.v-align img.only-img {
float:left;
}
div.v-align.has-img {
padding-top: 10px;
height: 30px;
}
div.v-align.has-img-and-text img.has-text {
vertical-align: -4px !important;
vertical-align: middle;
margin-top: -3px !important;
margin-top: 0px;
}
div.v-align.has-img-and-text {
padding-top: 0px !important;
padding-top: 10px;
height: 40px !important;
height: 30px;
}
</style>
<!--[if IE]>
<![endif]-->
</head>
<body>
<div class="v-align">
正常
</div>
<div class="v-align has-img">
<img src="./accept.png" class="only-img" />
</div>
<div class="v-align has-img-and-text">
<img src="./accept.png" align="absmiddle" class="has-text" />有图片有字
</div>
</body>
</html>
绝对定位 right
<style type="text/css">
div.box {
border: 1px solid red;
background-color: black;
height: 200px;
position: relative;
}
div.box img {
position: absolute;
right: 0px !important;
right: -1px; /* fix IE 6 */
border: 1px solid white;
}
</style>
<div class="box">
<img src="./accept.png" />
</div
例子2:
<!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" xml:lang="en">
<head>
<title>AgiCRM</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="demo" content="Demo" />
<meta name="demo" content="demo" />
<style type="text/css">
div.box {
border: 1px solid red;
background-color: black;
height: 200px;
position: relative;
padding:0px;
}
div.box img {
position: absolute;
right: 0px !important;
right: -1px; /* fix IE 6 */
border: 1px solid white;
}
</style>
<!--[if IE]>
<![endif]-->
</head>
<body>
<div class="box">
<img src="./accept.png" />
</div>
</body>
</html>
双倍空白边浮动BUG（IE6-）
<style type="text/css">
div.box {
border: 1px solid red;
background-color: #ccc;
height: 200px;
width: 400px
}
div.box .item {
border: 1px solid blue;
float: left;
margin-left: 20px;
display: inline; /* Fix for IE 6 */
}
</style>
<div class="box">
<div class="item">
Content
</div>
</div>
例子3:
<!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" xml:lang="en">
<head>
<title>AgiCRM</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="demo" content="Demo" />
<meta name="demo" content="demo" />
<style type="text/css">
div.box {
border: 1px solid red;
background-color: #ccc;
height: 200px;
width: 400px
}
div.box .item {
border: 1px solid blue;
float: left;
margin-left: 20px;
/*display: inline; /* Fix for IE 6 */*/
}
</style>
<!--[if IE]>
<![endif]-->
</head>
<body>
<div class="box">
<div class="item">
Content
</div>
</div>
</body>
</html>
莫名其妙的 3px BUG（IE6-)
<style type="text/css">
* {
margin: 0;
padding: 0;
}
div.box {
border: 1px solid #ccc;
margin: 0;
padding: 0px;
float: left;
width: 100px;
height: 50px;
margin-right: 0px !important;
margin-right: -3px;
}
</style>
<div class="box">
</div>
<p>
莫名其妙的3px
</p>
例子4:
<!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" xml:lang="en">
<head>
<title>AgiCRM</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="demo" content="Demo" />
<meta name="demo" content="demo" />
<style type="text/css">
* {
margin: 0;
padding: 0;
}
div.box {
border: 1px solid #ccc;
margin: 0;
padding: 0px;
float: left;
width: 100px;
height: 50px;
margin-right: 0px !important;
margin-right: -3px;
}
</style>
<!--[if IE]>
<![endif]-->
</head>
<body>
<div class="box">
</div>
<p>
莫名其妙的3px
</p>
</body>
</html>
当出现BUG时用border标出容器
<style type=“text/css”>
div.parent-box {
border: 1px sold red; /* Use border and different color*/
}
div.child-box {
border: 1px sold green; /* Use border and different color*/
}
</style>
<div class=“parent-box”>
<div class=“child-box”></div>
</div>
修复问题，而不是修复症状
知道问题根源后，再根据这个根源去修复，
否则会是治标不治本
像本课程 IMG 与 line-height 冲突还只是治标,
还不知道其真正原因