各種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>容器不擴展問題</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下如何使連續長字段自動換行</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.hemin.cnwww.hemin.cnwww.hemin.cnwww.hemin.cn
</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</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="http://www.baidu.com/img/logo-yy.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="#">躲貓貓bu躲貓貓bu躲貓貓bu躲貓貓bu躲貓貓bu</a> </li>
<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="#">躲貓貓bu躲貓貓bu躲貓貓bu躲貓貓bu躲貓貓bu</a> </li>
<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="#">躲貓貓bu躲貓貓bu躲貓貓bu躲貓貓bu躲貓貓bu</a> </li>
</ul>
</div><!--end: ghostHolder -->
<div class="clear"></div>
<div id="footer">
</div>
</div><!--end: holder -->
</body>
</html>
下面方法的任意一種即可消滅bug:
1.明確的指定最外面div容器(#holder)的寬度(相對寬度和絕對寬帶都可以)。
2.去掉最外面div容器(#holder)的背景顏色(或者背景圖片)
3.縮小浮動div容器(#floater)的高度到一定程度
4.不浮動div容器(#floater)
5.不使用
<div class="clear"><div>
技術
7、ie6下空標籤高度問題
一個空div如果高度設置爲0到19px,IE6下高度默認始終19PX。
例如:
.c{background-color:#f00;height:0px;/*給定任何小於20px的高度 */}
<div class="c"></div>
<!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>ie6下line-height bug</title>
<style>
.c{background-color:#f00;height:0px;/*給定任何小於20px的高度 */}</style>
</head>
<body>
<div class="c"></div>
</body>
</html>
如果不讓它默認爲19PX。而是0PX的話
解決方法有3種:
1.css裏面加上overflow:hidden;
2.div裏面加上註釋,
<div class="c"><!– –></div>
3.css裏面加上line-height:0;然後div裏面加上#nbsp;,
<div class="c"> </div>(#換成&)
注意:ie6下給div設置的高度小於ie6的line-height值時,ie6會將這個div的高度定爲line-height的值.
8、去掉圖片熱點鏈接或超鏈接的虛線框
<a href="#" onFocus=this.blur()>hemin</a>
9、按鈕按下時立體感效果:
a:hover { position:relative; top:1px; left:1px}/* 切記一定要是相對定位 */
10、整站變灰代碼(加到樣式表中):
html { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);}
11、中英文下劃線對齊方式(利用圖片的align=”absmiddle”):
<img src="img.gif" align="absmiddle">中英文並排:<a href="/">中文 gollum</a>
12、設爲首頁代碼:
<span onclick="var strHref=window.location.href;this.style.behavior=’url(#default#homepage)’;this.setHomePage(’http://www.hemin.cn’);" style="cursor:pointer">設爲首頁</span>
13、加入收藏代碼:
1. <script>
2. function addfavorite()
3. {
4. if (document.all)
5. {
6. window.external.addFavorite(’http://bbs.blueidea.com’,"經典論壇’);
7. }
8. else if (window.sidebar)
9. {
10. window.sidebar.addPanel(’經典論壇’, ‘http://bbs.blueidea.com’, "");
11. }
12. }
13. </script>
14. <a href="#" onclick="addfavorite()">把經典論壇加入收藏</a>
14、通過定義em實現小三角效果:
1. * {
2. font-size:14px;/* 必須通配字體大小 */
3. }
4. em {
5. display:block;
6. font:0/0 "宋體";/* 經本人摸索,只有在宋體下才最爲標準 */
7. border:7px solid;/* border值越大,三角形越大 */
8. border-color:#fff #fff #fff #444;/* 通過改變顏色值,可產生不同效果,自己實驗 */
9. margin-top:5px
10. }
15、IE6下當層高低於10px時,會出現高度在定義值上加10px的效果,最簡單的方法就是在該層樣式中加入:
font-size:0;
16、空div在IE(FF中沒有)是有默認高度的,可以用定義:
div { width:100%; background:#9c0; ling-height:0}
17、描邊文字效果:
1. <div style="position:relative; width:200px; height:25px; line-height:25px; text-align:center; font-size:14px; color:#fff; background:#9c0;">
2. 這是描邊文字<span style="position:absolute; left:-1px; top:-1px; color:#444;width:200px; height:25px; display:block">這是描邊文字</span>
3. </div>
18、input鼠標經過時改變顏色:
input {star : expression(onmouseover=function(){this.style.backgroundColor=”#FF0000″},onmouseout=function(){this.style.backgroundColor=”#FFFFFF”}) }
19、圖片在容器裏垂直居中顯示:
img {margin-top: expression(( 150 – this.height ) / 2);} //150是容器高
20、超鏈接訪問過後hover樣式就不出現的問題:
<!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>超鏈接訪問過後hover樣式就不出現的問題</title>
<style type="text/css">
<!--
a:link {
color:red
}
a:hover {
color:blue
}
a:visited {
color:green
}
a:active {
color:orange
}
-->
</style>
</head>
<body>
<a href="#">
www.hemin.cn--www.hemin.cn
</a>
</body>
</html>
ps:被點擊訪問過的超鏈接樣式不在具有hover和active了,很多人應該都遇到過這個問題,解決方法是改變CSS屬性的排列順序: L-V-H-A
21、FF下如何使連續長字段自動換行:
<!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下如何使連續長字段自動換行</title>
<style type="text/css">
<!--
div {
width:300px;
word-wrap:break-word;
border:1px solid red;
}
-->
</style>
</head>
<script type="text/javascript">
/* <![CDATA[ */
function toBreakWord(intLen){
var obj=document.getElementById("ff");
var strContent=obj.innerHTML;
var strTemp="";
while(strContent.length>intLen){
strTemp+=strContent.substr(0,intLen)+" ";
strContent=strContent.substr(intLen,strContent.length);
}
strTemp+=" "+strContent;
obj.innerHTML=strTemp;
}
if(document.getElementById && !document.all) toBreakWord(37)
/* ]]> */
</script>
<body>
<div id="ff">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
</body>
</html>
ps:衆所周知IE中直接使用word-wrap:break-word 就可以了, 這裏FF中我們使用JS插入的方法來解決
22、IE6下爲什麼圖片下方有空隙產生:
<!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>IE6下爲什麼圖片下方有空隙產生</title> <style type="text/css"> <!-- div { border:1px solid red; background:orange; } img { width:276px; height:110px; } --> </style> </head> </script> <body> <div> <img src="http://www.google.com/intl/en_ALL/images/logo.gif" alt="google" /> </div> </body> </html>
ps:解決這個BUG的方法也有很多,可以是改變html的排版,或者設置img 爲display:block;
或者設置vertical-align屬性爲vertical-align:top | bottom |middle |text-bottom
都可以解決.
23、 IE6下這兩個層中間怎麼有間隙:
<!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>IE6下這兩個層中間怎麼有間隙</title>
<style type="text/css">
<!--
.left {
float:left;
width:100px;
height:100px;
background:red
}
.right {
width:100px;
height:100px;
background:orange
}
-->
</style>
</head>
</script>
<body>
<div class="left">aaaaaa</div>
<div class="right">aaaaaa</div>
</body>
</html>
ps:這個IE的3PX BUG也是經常出現的,解決的辦法是給.right也同樣浮動 float:left 或者相對IE6定義.left margin-right:-3px;
24、list-style-image無法準確定位的問題:
<!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>ist-style-image無法準確定位的問題</title>
<style type="text/css">
<!--
li {
list-style:url("http://bbs.blueidea.com/attachments/2006/11/10/arrowb_kJrcZheJmiIF.gif");
}
li a {
position:relative;
top:-5px;
font:12px/25px 宋體;
}
-->
</style>
</head>
</script>
<body>
<ul>
<li><a href="#">web標準常見問題大全</a></li>
<li><a href="#">web標準常見問題大全</a></li>
<li><a href="#">web標準常見問題大全</a></li>
<li><a href="#">web標準常見問題大全</a></li>
<li><a href="#">web標準常見問題大全</a></li>
</ul>
</body>
</html>
ps:這個list-style-image的定位問題也是經常有人問的,解決的辦法一般是用li的背景模擬,這裏採用相對定位的方法也可以解決
25、web標準中定義id與class有什麼區別嗎:
<!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>web標準中定義id與class有什麼區別嗎</title>
<style type="text/css">
<!--
#aa {
color:red
}
.aa {
color:blue
}
-->
</style>
</head>
</script>
<body>
<div id="aa" class="aa">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
</body>
</html>
web標準中是不容許重複ID的,比如 div id=”aa” 不容許重複2次,而class 定義的是類,理論上可以無限重複, 這樣需要多次引用的定義便可以使用他.
二.
屬性的優先級問題
ID 的優先級要高於class,看上面的例子
三.
方便JS等客戶端腳本,如果在頁面中要對某個對象進行腳本操作,那麼可以給他定義一個ID,否則只能利用遍歷頁面元素加上指定特定屬性來找到它,這是相對浪費時間資源,遠遠不如一個ID來得簡單.
26、如何對齊文本與文本輸入筐:
<!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>如何對齊文本與文本輸入筐</title>
<style type="text/css">
<!--
input {
width:200px;
height:30px;
border:1px solid red;
}
-->
</style>
</head>
</script>
<body>
<input type="text" />aaaaaaaaaaaaaaaaaa
</body>
</html>
ps:遇到此種問題,設置文本框的vertical-align:middle 就可以了
27、爲什麼web標準中IE無法設置滾動條顏色了:
<!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>爲什麼web標準中IE無法設置滾動條顏色了</title>
<style type="text/css">
<!--
body {
scrollbar-face-color:#f6f6f6;
scrollbar-highlight-color:#fff;
scrollbar-shadow-color:#eeeeee;
scrollbar-3dlight-color:#eeeeee;
scrollbar-arrow-color:#000;
scrollbar-track-color:#fff;
scrollbar-darkshadow-color:#fff;
}
-->
</style>
</head>
</script>
<body>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</body>
</html>
ps:解決辦法是將body換成html
28、怎麼樣才能讓層顯示在FLASH之上呢:
<!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>怎麼樣才能讓層顯示在FLASH之上呢</title>
<style type="text/css">
<!--
div {
position:absolute;
top:20px;
left:20px;
width:200px;
height:200px;
background:red
}
object {
width:500px;
height:100px;
}
-->
</style>
</head>
</script>
<body>
<div>
www.hemin.cn
</div>
<object type="application/x-shockwave-flash" data="http://gg.blueidea.com/2005/www/m533-104.swf">
<param name="movie" value="http://gg.blueidea.com/2005/www/m533-104.swf" />
</object>
</body>
</html>
ps:解決的辦法是給FLASH設置透明
<param name="wmode" value="transparent" />
29、怎樣使一個層垂直居中於瀏覽器中:
<!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>怎樣使一個層垂直居中於瀏覽器中</title>
<style type="text/css">
<!--
div {
position:absolute;
top:50%;
left:50%;
margin:-100px 0 0 -100px;
width:200px;
height:200px;
border:1px solid red;
}
-->
</style>
</head>
</script>
<body>
<div>www.hemin.cn</div>
</body>
</html>
ps:這裏我們使用百分比絕對定位,與外補丁負值的方法,負值的大小爲其自身寬度高度除以二