破洛洛收集的各種CSS bug與技巧持續更新

DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS進階教程 >> 破洛洛收集的各種CSS bug與技巧持續更新

編輯：CSS進階教程

破洛洛收集的各種CSS bug與技巧持續更新來源:破洛洛

1、容器不擴展問題
這個是經常在我切圖的時候遇到的問題，如：

提示：你可以先修改部分代碼再運行。

解決辦法：在divGroup裡面加上overflow:hidden;zoom:1;
ps:很多人都是在裡面加個清除浮動空標簽來解決，其實這個是錯誤辦法。太增加代碼量了

2、margin雙邊距問題

提示：你可以先修改部分代碼再運行。

設置為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則會忽略.如下

.tabd1{
background:url(/res/images/up/tab1.gif) no-repeat 0px 0px !important; /*Style for FF*/
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="http://www.poluoluo.com/jzxy/UploadFiles_333/200911/20091118142230122.gif" /></a> </div> <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> <div class="clear"></div> <div id="footer"> </div> </div> </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>

運行：

提示：你可以先修改部分代碼再運行。

如果不讓它默認為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、設為首頁代碼:

13、加入收藏代碼:

<script>
function addfavorite()
{
if (document.all)
{
window.external.addFavorite(‘http://www.poluoluo.com‘,‘破洛洛‘);
}
else if (window.sidebar)
{
window.sidebar.addPanel(‘破洛洛‘, ‘http://www.poluoluo.com‘, "");
}
}
</script>
<a href="#" onclick="addfavorite()">把破洛洛加入收藏</a>

14、通過定義em實現小三角效果:

* {
font-size:14px;/* 必須通配字體大小 */
}
em {
display:block;
font:0/0 "宋體";/* 經本人摸索,只有在宋體下才最為標准 */
border:7px solid;/* border值越大,三角形越大 */
border-color:#fff #fff #fff #444;/* 通過改變顏色值,可產生不同效果,自己實驗 */
margin-top:5px
}

15、IE6下當層高低於10px時,會出現高度在定義值上加10px的效果,最簡單的方法就是在該層樣式中加入:

font-size:0;

16、空div在IE(FF中沒有)是有默認高度的,可以用定義:

div { width:100%; background:#9c0; ling-height:0}

17、描邊文字效果:

<div style="position:relative; width:200px; height:25px; line-height:25px; text-align:center; font-size:14px; color:#fff; background:#9c0;">
這是描邊文字<span style="position:absolute; left:-1px; top:-1px; color:#444;width:200px; height:25px; display:block">這是描邊文字</span>
</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樣式就不出現的問題:

提示：你可以先修改部分代碼再運行。

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下如何使連續長字段自動換行(www.poluoluo.com 破洛洛)</title> <style type="text/css">  </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下為什麼圖片下方有空隙產生:

提示：你可以先修改部分代碼再運行。

ps:解決這個BUG的方法也有很多，可以是改變html的排版，或者設置img 為display:block
或者設置vertical-align屬性為vertical-align:top | bottom |middle |text-bottom
都可以解決.

23、 IE6下這兩個層中間怎麼有間隙:

提示：你可以先修改部分代碼再運行。

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無法准確定位的問題(www.poluoluo.com 破洛洛)</title> <style type="text/css">  </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、如何對齊文本與文本輸入筐:

提示：你可以先修改部分代碼再運行。

ps:遇到此種問題，設置文本框的vertical-align:middle 就可以了

26、為什麼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無法設置滾動條顏色了(www.poluoluo.com 破洛洛)</title> <style type="text/css">  </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

27、怎麼樣才能讓層顯示在FLASH之上呢:

提示：你可以先修改部分代碼再運行。

ps:解決的辦法是給FLASH設置透明

28、怎樣使一個層垂直居中於浏覽器中:

提示：你可以先修改部分代碼再運行。

ps:這裡我們使用百分比絕對定位，與外補丁負值的方法，負值的大小為其自身寬度高度除以二

29、直通到屏幕底部的背景色:
在垂直方向是進行控制是CSS所不能的。如果你想讓導航欄和內容欄一樣直通到頁面底部，用表格是很方便的，但如果只用這樣的CSS：

#navigation { background: blue; width: 150px }

較短的導航條是不會直通到底部的，半路內容結束時它就結束了。該怎麼辦呢？

不幸的是，只能采用欺騙的手段了，給這較短的一欄加上個背景圖，寬度和欄寬一樣，並讓它的顏色和設定的背景色一樣。

body { background: url(blue-image.gif) 0 0 repeat-y }

此時不能用em做單位，因為那樣的話，一旦讀者改變了字體大小，這個花招就會露餡，只能使用px。

30、CSS透明屬性:

.transparent_class {
   filter:alpha(opacity=50);/*; 這個是為IE6設的，可取值在0-100，其它三個0到1. */
   -moz-opacity:0.5;/*這個是為了支持一些老版本的Mozilla浏覽器。*/
   -khtml-opacity: 0.5;/*這個為了支持一些老版本的Safari浏覽器。 */
   opacity: 0.5;/*opacity: 0.5; 這是最重要的，因為它是CSS標准.該屬性支持Firefox, Safari和 Opera. */
}

31、CSS字體屬性簡寫規則
一般用CSS設定字體屬性是這樣做的：

font-weight:bold;
font-style:italic;
font-varient:small-caps;
font-size:1em;
line-height:1.5em;
font-family:verdana,sans-serif;

但也可以把它們全部寫到一行上去：

font: bold italic small-caps 1em/1.5em verdana,sans-serif;

真不錯！只有一點要提醒的：這種簡寫方法只有在同時指定font-size和font-family屬性時才起作用。而且，如果你沒有設定font-weight, font-style, 以及 font-varient ，他們會使用缺省值，這點要記上。

32、修正IE6重復文字bug:

提示：你可以先修改部分代碼再運行。

解決方法：
# 去掉注釋
# 確保所有的元素使用”display:inline;”
# 在最後一個元素上使用一個”margin-right:-3px;”
# 為浮動元素的最後一個條目使用一個條件注釋，比如：

<!–[if !IE]>Put your commentary in here…<![endif]–>

#在容器的最後元素使用一個空的div(它也有必要設置寬度為90%或類似寬度。)
原文:www.positioniseverything.net

33、 IE6下:hover失效問題解決方案 :

a:hover{zoom:1} /*增加zoom, display, padding等等屬性也可*/

34、IE6,7失效的margin-left/right bug:

提示：你可以先修改部分代碼再運行。

解決辦法:在wrap加zoom:1;
轉：http://www.cssass.com/blog/index.php/2009/350.html/comment-page-1#comment-128

35、單行或多行始終文字垂直居中:

<!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> <title>多行文字垂直居中(www.poluoluo.com 破洛洛)</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> *{padding:0;margin:0;} .a{display:table-cell;/*ff*/text-align:center; width:400px; height:200px;line-height:200px; font-size:175px;/*IE6,7*/ border:4px solid #beceeb; color:#069; vertical-align:middle;} .b{display:inline-block; font-size:12px; vertical-align:middle;text-align:center;line-height:10px;width:100px;} </style> </head> <body> <div class="a"> <span class="b">hemin www.poluoluo.com 破洛洛</span> </div> </body> </html>

提示：你可以先修改部分代碼再運行。

36、進入網頁加入漸顯切換效果:

37、IE6下英文字體跟中文字體不能對齊:
解決辦法：中英文都統一使用“宋體”。

上一頁:CSS研究教程:類名的長命名和短命名
下一頁:破洛洛收集的各種浏覽器css hack 持續更新

CSS進階教程

CSS教程(4)：通過實例學習CSS背景: 本教程介紹：1.如何僅顯示一次背景圖像，2.如何放置背景圖像，3.如何使用%來定位背景圖像。參考破洛
CSS教程:認真學習haslayout: 網頁制作poluoluo文章簡介：要想更好的理解 css，尤其是 IE 下對 css 的渲染，ha
網頁制作教程:css讓頁面居中對齊: 網頁制作POLUOLUO文章簡介：總結一下css讓頁面居中對齊的方法. 總結一

CSS基礎知識 Sass教程 CSS3基礎關於CSS CSS進階教程 DIV十CSS布局 CSS特效代碼 CSS詳解

DIV CSS 佈局教程網

相關文章