12種CSS BUG解決方法與技巧

css bug是布局中最頭疼的問題。我們需要兼顧各種瀏覽器，以期待獲得一致的效果。非常遺憾的是各廠商之間的競爭導致很多問題的存在。而ie6與ie7在很多問題上也存在著很大的差別。輕鬆的解決css bug是我們必須掌握的技能。現在整理出最常用的12種css bug解決方法以及css bug類的小技巧。

一、針對瀏覽器的選擇器

這些選擇器在你需要針對某款瀏覽器進行css設計時將非常有用.

* 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

www.52css.com]

* html #content-box

二、讓ie6支援png透明

乙個ie6的bug引起了**煩, 他不支援透明的png。

你需要使用乙個css濾鏡

.52css.com]

*html #image-style

三、移除超連結的虛線.com]

outline:none.a

四、給行內元素定義寬度

如果你給乙個行內元素定義寬度,那麼它只是在ie6下有效. 所有的html元素要麼是行內元素要麼就好是塊元素. 行內元素包括: , ,和 . 塊元素包括, ,

css:

h1

h1 span 你可以看到我們對標題使用了標準的作為標籤並且用css來將文字替換為. text-indent屬性將文字推到了瀏覽器左邊5000px處, 這樣對於瀏覽者來說就看不見了.

十一、最小寬度

ie6另外乙個bug就是它不支援 min-width 屬性. min-width又是相當有用的, 特別是對於彈性模板來說, 它們有乙個100%的寬度,min-width 可以告訴瀏覽器何時就不要再壓縮寬度了.

除ie6以外所有的瀏覽器你只需要乙個 min-width: xpx; 例如:

.52css.com]

.container

為了讓他在ie6下工作, 我們需要一些額外的工作. 開始的時候我們需要建立兩個div, 乙個包含另乙個:

.52css.com]

content

.52css.com]

.container

這時該是ie hack大顯身手的時候了. 你需要包含如下的**:

.52css.com]

* html .container

* html .holder

十

二、隱藏水平滾動條

為了避免出現水平滾動條, 在body裡加入 overflow-x:hidden .

body

當你決定使用乙個比瀏覽器視窗大的或者flash時, 這個技巧將非常有用.

12種CSS BUG解決方法與技巧

最常用的12種CSS BUG解決方法與技巧

常用的CSS BUG解決方法與技巧收集貼

問題與解決方法積累

12種CSS BUG解決方法與技巧

最常用的12種CSS BUG解決方法與技巧

常用的CSS BUG解決方法與技巧 收集貼

問題與解決方法積累

相關推薦

常用的CSS BUG解決方法與技巧收集貼