CSS BUG解決方法以及CSS BUG類的小技巧
2024-07-11 08:24:55
供稿：網友
CSSbug是布局中最頭疼的問題。我們需要兼顧各種瀏覽器，以期待獲得一致的效果。非常遺憾的是各廠商之間的競爭導致很多問題的存在。而IE6與IE7在很多問題上也存在著很大的差別。在Vevb.com大量的技術文檔中，也包含了這方面的內容。輕松的解決CSSbug是我們必須掌握的技能。現在整理出最常用的12種CSSBUG解決方法以及CSSBUG類的小技巧。希望對您的學習、工作有所幫助，如果您依然有疑問，歡迎您到Vevb.com查閱、搜索相關內容。
一、針對瀏覽器的選擇器
這些選擇器在你需要針對某款瀏覽器進行css設計時將非常有用.
IE6及其更低版本
*html{}
IE7及其更低版本
*:first-child html{}*html{}
僅針對IE7
*:first-child html{}
IE7和當代瀏覽器
html>body{}
僅當代瀏覽器(IE7不適用)
html>/**/body{}
Opera9及其更低版本
html:first-child{}
Safari
html[xmlns*=""]body:last-child{}
要使用這些選擇器,請將它們放在樣式之前.例如:
#content-box{
width:300px;
height:150px;
}
*html#content-box{
width:250px;
}
您也可以參考—CSShacks：瀏覽器特定選擇器介紹
二、讓IE6支持PNG透明
一個IE6的Bug引起了大麻煩,他不支持透明的PNG圖片。
你需要使用一個css濾鏡
*html#image-style{
background-image:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="fil
ename.png",sizingMethod="scale");
}
三、移除超鏈接的虛線
FireFox下,當你點擊一個超鏈接時會在外圍出現一個虛線輪廓.這很容易解決,只需要在標簽樣式中加入：
outline:none.
a{
outline:none;
}
您也可以參考—除鏈接元素的虛線框（兼容IE7、IE6、FF）
四、給行內元素定義寬度
如果你給一個行內元素定義寬度,那么它只是在IE6下有效.所有的HTML元素要么是行內元素要么就好是塊元素.行內元素包括:<span>,<a>,<strong>和<em>.塊元素包括<div>,<p>,<h1>,<form>和<li>.你不能定義行內元素的寬度,為了解決這個問題你可以將行內元素轉變為塊元素.
span{width:150px;display:block}
五、讓固定寬度的頁面居中
為了讓頁面在瀏覽器居中顯示,需要相對定位外層div,然后把margin設置為auto.
#wrapper{
margin:auto;
position:relative;
}
六、IE6雙倍邊距的bug
給此對象加上display:inline即可解決問題。具體介紹：
七、BoxModel盒模型bug的一般解決辦法
八、兩個層之間的3px間隙
傳說中的“IE3pxbug”，解決的辦法：
