目錄
一. 介紹
這篇文章包括了8個非常有用的解決辦法, 在進行CSS設計遇到問題時你就會用到它們.
二. 針對浏覽器的選擇器
這些選擇器在你需要針對某款浏覽器進行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;
} /* overrides the above style and changes the width to 250px in IE 6 and below */
三. 讓IE6支持PNG透明
一個IE6的Bug引起了大麻煩, 他不支持透明的PNG圖片.
你需要使用一個CSS濾鏡
*Html #image-style {
background-image: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="fil
ename.png", sizingMethod="scale");
}
四. 移除超鏈接的虛線(僅對FF有效)
Firefox下,當你點擊一個超鏈接時會在外圍出現一個虛線輪廓. 這很容易解決, 只需要在標簽樣式中加入 outline:none .
a{
outline: none;
}
五. 給行內元素定義寬度
如果你給一個行內元素定義寬度,那麼它只是在IE6下有效. 所有的Html元素要麼是行內元素要麼就好是塊元素. 行內元素包括: <span>, <a>, <strong> 和 <em>. 塊元素包括<div>, <p>, <h1>, <form>和<li> . 你不能定義行內元素的寬度, 為了解決這個問題你可以將行內元素轉變為塊元素.
span { width: 150px; display: block }
六. 讓固定寬度的頁面居中
為了讓頁面在浏覽器居中顯示, 需要相對定位外層div, 然後把margin設置為auto.
#wrapper {
margin: auto;
position: relative;
}
七. 圖片替換技術
用文字總比用圖片做標題好一些. 文字對屏幕閱讀機和SEO都是非常友好的.
Html:
<h1><span>Main heading one</span></h1>
CSS:
h1 { background: url(heading-image.gif) no-repeat; }
h1 span {
position:absolute;
text-indent: -5000px;
}
你可以看到我們對標題使用了標准的<h1>作為標簽並且用CSS來將文本替換為圖片. text-indent屬性將文字推到了浏覽器左邊5000px處, 這樣對於浏覽者來說就看不見了.
關掉CSS,然後看看頭部會是什麼樣子的.
八. 最小寬度
IE6另外一個bug就是它不支持 min-width 屬性. min-width又是相當有用的, 特別是對於彈性模板來說, 它們有一個100%的寬度,min-width 可以告訴浏覽器何時就不要再壓縮寬度了.
除IE6以外所有的浏覽器你只需要一個 min-width: Xpx; 例如:
.container {
min-width:300px;
}
為了讓他在IE6下工作, 我們需要一些額外的工作. 開始的時候我們需要創建兩個div, 一個包含另一個:
<div class="container">
<div class="holder">Content</div>
</div>
然後你需要定義外層div的min-width屬性
.container {
min-width:300px;
}
這時該是IE hack大顯身手的時候了. 你需要包含如下的代碼:
* Html .container {
border-right: 300px solid #FFF;
}
* Html .holder {
display: inline-block;
position: relative;
margin-right: -300px;
}
As the browser window is resized the outer div width reduces to suit until it shrinks to the border width, at which point it will not shrink any further. The holder div follows suit and also stops shrinking. The outer div border width becomes the minimum width of the inner div.
九. 隱藏水平滾動條
為了避免出現水平滾動條, 在body裡加入 overflow-x:hidden .
body { overflow-x: hidden; }
當你決定使用一個比浏覽器窗口大的圖片或者Flash時, 這個技巧將非常有用.