CSS Hack汇总(转载)
CSS hack是指我們?yōu)榱思嫒莞鳛g覽器，而使用的特別的css定義技巧。這是國(guó)外摘來(lái)的一張CSS hack列表，顯示了各瀏覽器對(duì)css hack的支持程度，對(duì)我們制作兼容網(wǎng)頁(yè)非常有幫助。
現(xiàn)在瀏覽器的市場(chǎng)99%的份額被 IE 和 FF 所占 .所以,現(xiàn)在的hack應(yīng)該主要針對(duì)這兩個(gè)瀏覽器的了
現(xiàn)在主流的瀏覽器是 IE6 和 Firefox ,這兩個(gè)不同的瀏覽器的內(nèi)核是不一樣的. 同時(shí),這兩個(gè)瀏覽器對(duì)CSS2.0 在某些細(xì)節(jié)上的理解也不一樣.因此,就有必要針對(duì)這兩個(gè)瀏覽器制定一些不同的代碼.
?????? 于是,就有了 CSS hack 技術(shù)了 當(dāng)然,njuptsoz 認(rèn)為 ,隨著時(shí)間的推薦,WEB標(biāo)準(zhǔn)的推進(jìn),這種 hack技術(shù)最終是會(huì)消亡的,這一點(diǎn)從IE7就可以看出來(lái).但是,目前的市場(chǎng)還是 IE6 和 FF 的天下,所以, 現(xiàn)在來(lái)討論 hack技術(shù),還是十分的必要和必須的!
屏蔽IE瀏覽器（也就是IE下不顯示）
select:empty {font:12px !important;} /*safari可見*/
這里select是選擇符，根據(jù)情況更換。第二句是MAC上safari瀏覽器獨(dú)有的。
當(dāng)面臨需要只針對(duì)IE7與IE5.0做樣式的時(shí)候就可以采用這個(gè)HACK。
當(dāng)面臨需要只針對(duì)IE7做樣式的時(shí)候就可以采用這個(gè)HACK。
這個(gè)地方要特別注意很多博客都寫成了是IE6的HACK其實(shí)IE5.x同樣可以識(shí)別這個(gè)HACK。其它瀏覽器不識(shí)別。
html/**/ >body select {…}
這句與上一句的作用相同。
這里主要是通過(guò)CSS注釋分開一個(gè)屬性與值，注釋在冒號(hào)前。
這里與上面一句不同的是在選擇符與花括號(hào)之間多了一個(gè)CSS注釋。不屏蔽IE5.5
這一句是在上一句中去掉了屬性區(qū)的注釋。只有IE5不識(shí)別，IE5.5可以識(shí)別。
盒模型的清除方法不是通過(guò)!important來(lái)處理的。這點(diǎn)要明確。
在Firefox中，當(dāng)子級(jí)都為浮動(dòng)時(shí)，那么父級(jí)的高度就無(wú)法完全的包住整個(gè)子級(jí)，那么這時(shí)用這個(gè)清除浮動(dòng)的HACK來(lái)對(duì)父級(jí)做一次定義，那么就可以解決這個(gè)問(wèn)題。
這個(gè)是在越出長(zhǎng)度后會(huì)自行的截掉多出部分的文字，并以省略號(hào)結(jié)尾，很好的一個(gè)技術(shù)。只是目前Firefox并不支持。
針對(duì)Opera瀏覽器做單獨(dú)的設(shè)定。
以上都是寫CSS中的一些HACK，這些都是用來(lái)解決局部的兼容性問(wèn)題，如果希望把兼容性的內(nèi)容也分離出來(lái)，不妨試一下下面的幾種過(guò)濾器。這些過(guò)濾器有的是寫在CSS中通過(guò)過(guò)濾器導(dǎo)入特別的樣式，也有的是寫在HTML中的通過(guò)條件來(lái)鏈接或是導(dǎo)入需要的補(bǔ)丁樣式。
IE5.x的過(guò)濾器，只有IE5.x可見i{content:"\";/*" "*/}} @import 'ie5win.css'; /*";}
}/* */
??? @import "ie5mac.css";
/**/
所有的IE可識(shí)別
<!--[if IE 5.0]> Only IE 5.0 <![endif]-->
只有IE5.0可以識(shí)別
<!--[if gt IE 5.0]> Only IE 5.0+ <![endif]-->
IE5.0包換IE5.5都可以識(shí)別
<!--[if lt IE 6]> Only IE 6- <![endif]-->
僅IE6可識(shí)別
<!--[if gte IE 6]> Only IE 6/+ <![endif]-->
IE6以及IE6以下的IE5.x都可識(shí)別
<!--[if lte IE 7]> Only IE 7/- <![endif]-->
僅IE7可識(shí)別
以上內(nèi)容可能并不全面，歡迎大家能和我一起把這些技巧都匯總起來(lái)，為以后工作的查詢提供一個(gè)方便，同時(shí)在這里感謝那些研究出這些HACK的作者們。
、說(shuō)明本文闡述了8條我們發(fā)現(xiàn)的在用CSS設(shè)計(jì)中有用的解決方案。
2、瀏覽器特定的選擇器
當(dāng)你想在一個(gè)瀏覽器里改變樣式而不像在其他瀏覽器中改變時(shí)，這些選擇器很有用。
IE6以下
?? *html{}
IE 7 以下
*:first-child+html {} * html {}
只對(duì)IE 7
*:first-child+html {}
只對(duì)IE 7 和現(xiàn)代瀏覽器
html>body {}
只對(duì)現(xiàn)代瀏覽器(非IE 7)
html>/**/body {}
最新的Opera 9以下版本
html:first-child {}
Safari
html[xmlns*=”"] body:last-child {}
要使用這些選擇器，請(qǐng)?jiān)跇邮角皩懴逻@些代碼。例如：
#content-box {
width: 300px;
height: 150px;
}
* html #content-box {
width: 250px;
}
/* 重寫上面的代碼并且把寬度改為250PX
在IE6以下版本中適用。 */
3、在IE6中使用透明PNG圖片
IE6的一個(gè)很難處理的BUG就是它不支持透明PNG圖片。
你可能需要用一個(gè)重寫的CSS的濾鏡來(lái)解決這個(gè)問(wèn)題：
*html #image-style {
background-image: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="fil
ename.png", sizingMethod="scale");
}
8、最小寬度
IE的另外一個(gè)Bug就是它不支持min-width屬性。min-width確實(shí)非常有用，特別是對(duì)于100%寬度的可變模板來(lái)說(shuō)，因?yàn)樗嬖V瀏覽器停止收縮。
對(duì)于除IE6以外的所有瀏覽器來(lái)說(shuō)你只需min-width:xpx;例如：
.container {
min-width:300px;
}
要讓這些在IE6下起作用的話你要添加額外的努力！你需要?jiǎng)?chuàng)建兩個(gè)DIV，一個(gè)包含著另一個(gè)。
<div class=”container”>
<div class=”holder”>Content</div>
</div>
然后你需要設(shè)置外面層的min-width：
.container {
min-width:300px;
}
現(xiàn)在又要IE hack起作用了，你需要寫下以下代碼：
* html .container {
border-right: 300px solid #FFF;
}
* html .holder {
display: inline-block;
position: relative;
margin-right: -300px;
}
當(dāng)瀏覽器窗口調(diào)整外層寬度來(lái)適應(yīng)直到它縮小到border的寬度時(shí)，這個(gè)時(shí)候它就不能夠在縮小了。而holder層也會(huì)停止收縮。外層的邊框?qū)挾茸兂闪藘?nèi)層的最小寬度。
9、隱藏水平滾動(dòng)
要去除水平滾動(dòng)條，可以在body中插入overflow-x:hidden屬性。
body {
overflow-x: hidden;
}
這在你決意要用一個(gè)比瀏覽器款的圖片或Flash時(shí)很有用。
4、去掉連接虛線框
當(dāng)你點(diǎn)擊鏈接時(shí)，Firefox會(huì)在鏈接周圍產(chǎn)生一個(gè)虛線外框。
這個(gè)很好解決，只需在a標(biāo)簽中添加outline:none就可以了。
a{
?? outline:none;
}
5、對(duì)inline元素應(yīng)用寬度。
如果你對(duì)一個(gè)inline元素使用寬度，它將只在IE6下起作用。
所 以的HTML標(biāo)簽要么是Block的要么就是inline的。inline屬性的標(biāo)簽 有<span><a><strong>和<em>Block標(biāo)簽包 括<div><p><h1><form>和<li>
你不能控制inilne標(biāo)簽的寬帶，不過(guò)有一個(gè)方法是把標(biāo)簽屬性從inline改為Block。
span{
?? width:150px;
?? display:block;
}
應(yīng)用display:block能夠把span標(biāo)簽變成block標(biāo)簽，從而控制它的寬度。
6、使一個(gè)固定寬度的網(wǎng)站居中。
為了讓你的網(wǎng)站在瀏覽器中居中，可以為最外層Div添加position:relative屬性，然后將margin設(shè)為auto。
#wrapper {
margin: auto;
position: relative;
}
7、圖片替換技術(shù)
對(duì)于頭部來(lái)說(shuō)，永遠(yuǎn)是最好用文字而不是圖片。在你必須要用圖片的某個(gè)特殊地方最好使用隱藏文字的層的背景圖片。這對(duì)于屏幕閱讀和SEO非常有用，盡管依然使用很普通的文字，這可以聯(lián)想到所有的優(yōu)點(diǎn)。
HTML：
<h1><span>Main heading one</span></h1>
CSS:
h1 {
background: url(heading-image.gif) no-repeat;
}
h1 span {
position:absolute;
text-indent: -5000px;
}
正如你所見，我們對(duì)H1標(biāo)簽使用普通的HTML代碼，用CSS來(lái)將圖片替代文字。Text-indent把文字放到左邊5000像素處，從而用戶看不到它們。
什么是CSS hack
由于不同的瀏覽器，比如Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等，對(duì)CSS的解析認(rèn)識(shí)不一樣，因此會(huì)導(dǎo)致生成的頁(yè)面效果不一樣，得不到我們所需要的頁(yè)面效果。
這個(gè)時(shí)候我們就需要針對(duì)不同的瀏覽器去寫不同的CSS，讓它能夠同時(shí)兼容不同的瀏覽器，能在不同的瀏覽器中也能得到我們想要的頁(yè)面效果。
這個(gè)針對(duì)不同的瀏覽器寫不同的CSS code的過(guò)程，就叫CSS hack,也叫寫CSS hack。
CSS Hack的原理是什么
由于不同的瀏覽器對(duì)CSS的支持及解析結(jié)果不一樣，還由于CSS中的優(yōu)先級(jí)的關(guān)系。我們就可以根據(jù)這個(gè)來(lái)針對(duì)不同的瀏覽器來(lái)寫不同的CSS。
比如 IE6能識(shí)別下劃線_和星號(hào)*，IE7能識(shí)別星號(hào)*，當(dāng)不能識(shí)別下劃線_，而firefox兩個(gè)都不能認(rèn)識(shí)。等等
書寫順序，一般是將識(shí)別能力強(qiáng)的瀏覽器的CSS寫在后面。下面如何寫里面說(shuō)得更詳細(xì)些。
如何寫CSS Hack
比如要分辨IE6和firefox兩種瀏覽器，可以這樣寫：
<style>??
div{???
??? background:green; /* for firefox */???
??? *background:red; /* for IE6 */???
}???
</style>??
<div>我在IE6中看到是紅色的，在firefox中看到是綠色的。</div>
<style>
div{
background:green; /* for firefox */
*background:red; /* for IE6 */
}
</style>
<div>我在IE6中看到是紅色的，在firefox中看到是綠色的。</div>
解釋一下：
上面的css在firefox中，它是認(rèn)識(shí)不了后面的那個(gè)帶星號(hào)*的東東是什么的，于是將它過(guò)濾掉，不予理睬，解析得到的結(jié)果是:div{background:green},于是理所當(dāng)然這個(gè)div的背景是綠色的。
在IE6中呢，它兩個(gè)background都能識(shí)別出來(lái)，它解析得到的結(jié)果是:div{background:green;background:red;},于是根據(jù)優(yōu)先級(jí)別，處在后面的red的優(yōu)先級(jí)高，于是當(dāng)然這個(gè)div的背景顏色就是紅色的了
區(qū)別IE6與FF：
?????? background:orange;*background:blue;
區(qū)別IE6與IE7：
?????? background:green !important;background:blue;
區(qū)別IE7與FF：
?????? background:orange; *background:green;
區(qū)別FF，IE7，IE6：
?????? background:orange;*background:green !important;*background:blue;
注：IE都能識(shí)別*;標(biāo)準(zhǔn)瀏覽器(如FF)不能識(shí)別*；
IE6能識(shí)別*，但不能識(shí)別 !important,
IE7能識(shí)別*，也能識(shí)別!important;
FF不能識(shí)別*，但能識(shí)別!important;
IE6 IE7 FF
* √ √ ×
!important × √ √
hack 一詞在網(wǎng)絡(luò)上相當(dāng)常用，一般是指對(duì)程序或系統(tǒng)進(jìn)行非官方的修改，或是非官方的補(bǔ)丁，被稱之為hack，當(dāng)然hacker就是指黑客了，css hack也可以理解為css黑客程序，是指一種改善css在不同瀏覽器下表現(xiàn)形式的技巧方法。csshack技術(shù)是通過(guò)一些瀏覽器特殊支持或不支持的語(yǔ) 句，使一個(gè)css樣式能夠被瀏覽器解析或不能被瀏覽器解析。
css hack用于對(duì)不同瀏覽器區(qū)別處理，這樣就做到了針對(duì)一些瀏覽器之間的顯示問(wèn)題進(jìn)行單獨(dú)的樣式設(shè)計(jì)進(jìn)行修復(fù)，關(guān)于如何使用css hack，舉一個(gè)非常簡(jiǎn)單的例子，例如css中的導(dǎo)入樣式表語(yǔ)句—@import，@import語(yǔ)句是IE5之后才被IE所認(rèn)同的一個(gè)命令，因此如果使用@import導(dǎo)入樣式表，這些樣式表只有IE5才能看到，IE4是沒有辦法解析，因此我們利用此方法編寫樣式代碼：
@import url("newstyle.css");
body {
font-size:14px;
}
我們?cè)趎ewstyle.css中做如下編碼：
body {
font-size:18px;
}
最 終在瀏覽網(wǎng)頁(yè)時(shí)，如果使用IE4瀏覽器，將使用字體大小為14px，而如果使用IE5及以上版本瀏覽器時(shí)，將顯示為18px的字體。這就是csshack 的基本應(yīng)用形式，通過(guò)一些瀏覽器之間特殊命令來(lái)實(shí)現(xiàn)樣式的隱藏與顯示，在這里針對(duì)IE4及IE4以上版本瀏覽器做了字體樣式的區(qū)分，從而達(dá)到了hack的 目的。
超強(qiáng)干貨來(lái)襲 云風(fēng)專訪：近40年碼齡，通宵達(dá)旦的技術(shù)人生總結(jié)
以上是生活随笔為你收集整理的CSS Hack汇总(转载)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 向上类型转换和拷贝构造函数
- 下一篇： CSS 常用属性