|
五. 給行內(nèi)元素定義寬度
如果你給一個(gè)行內(nèi)元素定義寬度,那么它只是在IE6下有效. 所有的HTML元素要么是行內(nèi)元素要么就好是塊元素. 行內(nèi)元素包括: <span>, <a>, <strong> 和 <em>. 塊元素包括<div>, <p>, <h1>, <form>和<li> . 你不能定義行內(nèi)元素的寬度, 為了解決這個(gè)問題你可以將行內(nèi)元素轉(zhuǎn)變?yōu)閴K元素.
span { width: 150px; display: block }
六. 讓固定寬度的頁面居中
為了讓頁面在瀏覽器居中顯示, 需要相對定位外層div, 然后把margin設(shè)置為auto.
#wrapper {
margin: auto;
position: relative;
}
七. 圖片替換技術(shù)
用文字總比用圖片做標(biāo)題好一些. 文字對屏幕閱讀機(jī)和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;
}
你可以看到我們對標(biāo)題使用了標(biāo)準(zhǔn)的<h1>作為標(biāo)簽并且用css來將文本替換為圖片. text-indent屬性將文字推到了瀏覽器左邊5000px處, 這樣對于瀏覽者來說就看不見了.
關(guān)掉css,然后看看頭部會(huì)是什么樣子的.
八. 最小寬度
IE6另外一個(gè)bug就是它不支持 min-width 屬性. min-width又是相當(dāng)有用的, 特別是對于彈性模板來說, 它們有一個(gè)100%的寬度,min-width 可以告訴瀏覽器何時(shí)就不要再壓縮寬度了.
除IE6以外所有的瀏覽器你只需要一個(gè) min-width: Xpx; 例如:
.container {
min-width:300px;
}
為了讓他在IE6下工作, 我們需要一些額外的工作. 開始的時(shí)候我們需要?jiǎng)?chuàng)建兩個(gè)div, 一個(gè)包含另一個(gè):
<div class="container">
<div class="holder">Content</div>
</div>
然后你需要定義外層div的min-width屬性
.container {
min-width:300px;
}
這時(shí)該是IE hack大顯身手的時(shí)候了. 你需要包含如下的代碼:
* 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.
九. 隱藏水平滾動(dòng)條
為了避免出現(xiàn)水平滾動(dòng)條, 在body里加入 overflow-x:hidden .
body { overflow-x: hidden; }
當(dāng)你決定使用一個(gè)比瀏覽器窗口大的圖片或者flash時(shí), 這個(gè)技巧將非常有用.
本文鏈接：http://m.95time.cn/tech/web/2008/5470.asp 
出處：譯言
責(zé)任編輯：bluehearts
上一頁 CSS Hacks 和 問題解決 [1] 下一頁
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁 
第 2 頁 CSS Hacks 和 問題解決 [2]
