CSS BUG

歪SIR 2011-07-24

展開(kāi)全文

大部分BUG是人為的

CSS 編寫不規(guī)范，語(yǔ)法錯(cuò)誤可以用 W3C CSS 檢驗(yàn)器
http://jigsaw./css-validator/

選擇器特殊性問(wèn)題,可以用FireBug解決

IMG與 line-height沖突

Html代碼

<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:

Html代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www./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>

絕對(duì)定位 right

Html代碼

<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:

Html代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www./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>

雙倍空白邊浮動(dòng)BUG（IE6-）

Html代碼

<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:

Html代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www./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-)

Html代碼

<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:

Html代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www./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>

當(dāng)出現(xiàn)BUG時(shí)用border標(biāo)出容器

Html代碼

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

修復(fù)問(wèn)題，而不是修復(fù)癥狀
知道問(wèn)題根源后，再根據(jù)這個(gè)根源去修復(fù)，
否則會(huì)是治標(biāo)不治本
像本課程 IMG 與 line-height 沖突還只是治標(biāo),
還不知道其真正原因

本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點(diǎn)。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購(gòu)買等信息，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊一鍵舉報(bào)。

轉(zhuǎn)藏 分享

QQ空間 QQ好友新浪微博微信

獻(xiàn)花（0） +1

來(lái)自：歪SIR > 《CSS》

舉報(bào)/認(rèn)領(lǐng)