css hack(css hack方式有哪些)

css hack方式有哪些

what
由于不同廠商的瀏覽器或某瀏覽器的不同版本（IE6~IE11，Firefox/Safari/Opera/Chrome等），對css的支持、解析不一樣。這時，我們為了獲得統一的頁面效果，就需要針對不同的瀏覽器或不同的版本寫特定的css樣式，把這個針對不同瀏覽器/不同版本寫相應的css code的過程叫做css hack。

how
由于不同的瀏覽器和瀏覽器的各版本對css的支持及解析結果不一樣，以及css優先級對瀏覽器展現效果的影響，我們可以據此針對不同的瀏覽器情景應用不同的css。

css hack 分類
有三種表現形式，css屬性前綴法，選擇器前綴法，以及IE條件注釋法。

屬性前綴法（即類內部hack）

選擇器前綴法

IE條件注釋法
css hack一般是將適用范圍廣，被識別能力強的css定義在前面。

css hack方式一：條件注釋法（適用于IE10以下，IE10以后不再支持條件注釋）

gt：greater than，選擇條件版本以上版本，不包含條件版本。
lt： less than ，選擇條件版本以下版本，不包含條件版本。
gte：greater than or equal ，選擇條件版本以上版本，包含條件版本。
lte：less than or equal ，選擇條件版本以下版本，包含條件版本。
！：選擇條件版本以外所有版本，無論高低。

條件注釋屬性：

實例

非IE

html腳本中平常的注釋方法，條件注釋法只有IE10以下的IE瀏覽器可以識別，對于別的瀏覽器那么就只能看見的是一對封閉的不起作用的注釋。對于非IE 的注釋，注意里面有一個是起到封閉注釋的作用。

css hack方式二：類內屬性前綴法
屬性前綴是在CSS樣式屬性名上加上一些只有特定瀏覽器才能識別的hack前綴，已達到預期的頁面展現效果。
以下討論的是標準模式中的hack方法

規則
*color：IE5.5、6、7
+color : IE5.5、6、7
＃color : IE5.5、6、7
-color：IE5.5、6
＿color: IE5.5、6
這幾個當中，我喜歡用＊與 ＿
color : IE8、9、10、11（12以上沒測）（此處有些地方說歐朋也識別，可是我測試啦，不管用，不知道啊）
color9 : IE6、7、8、9、10（11不支持）
color9:IE8、9、10（其他不支持）
9取了共集
color:red!important;提高該設置的優先級

css hack方式三：選擇器前綴法

規則
@media screen9{……}（只對IE6、7生效）
@media screen{……}（只對IE8生效）
@media screen,screen9{……}（對IE6,7,8生效）
@media screen{……}（只對IE8、9、10生效）
@media screen and (min-width:0){……}（只對IE9，10有效）
@media screen and (-ms-high-contrast:active),(-ms-high-contrast:none){……}（對IE10,11有效，以上沒測）

hack 利弊
盡量避免使用css hack，但有些情況下，為了顧及用戶體驗實現向下兼容，不得已才使用hack。但過多使用會造成html文檔混亂不堪，增加管理和維護的負擔。

css的hack

對IE6、IE7、FF兼容性的詳細CSS HACK介紹2007年12月05日 16:00以下為引用：
現在我大部分都是用!important來hack，對于ie6和firefox測試可以正常顯示，但是ie7對! important可以正確解釋，會導致頁面沒按要求顯示！搜索了一下，找到一個針對IE7不錯的hack方式就是使用“*+html”，現在用IE7瀏 覽一下，應該沒有問題了。

現在寫一個CSS可以這樣：
#example { color: #333; } /* Moz */
* html #example { color: #666; } /* IE6 */
*+html #example { color: #999; } /* IE7 */

那么在firefox下字體顏色顯示為#333，IE6下字體顏色顯示為#666，IE7下字體顏色顯示為#999，他們都互不干擾。我真希望那個IE6快點退休......

css Hacks，css樣式表補丁.用于修正XHTML編碼設計的網頁模板布局,某些層的溢出問題,HACKS出處:www.webdevout.net，這個CSS補丁(hacks)很簡單，在樣式表中單獨為ie7設置某個元素，id或者class前面這樣寫:

*:first-child+html #ID{}

或者

*:first-child+html .class{}
別忘掉了前面的*,這個hacks使得DIV+CSS網頁模板在ie5+,ie6,ie7,firefox 1.5,firefox 2的瀏覽器中都可以完美體現原始布局,而不會出現層溢出等問題.

IE7 修復了很多 bug，也增加了對一些選擇符的支持，所以現在諸如 *html {} 和 html>body {} 等針對 IE 隱藏或顯示的 hack 都會在 IE7 中失效。雖然 CSS Hack 不推薦使用，條件注釋才是萬無一失的過濾器，但是條件注釋只能出現在 HTML 中，CSS Hack 還是有用武之地的。Nanobot 發現了一些針對 IE7 的 CSS Hack，具體就是：

>body
html*
*+html

這 三種寫法，其中前兩種都是不合法的 CSS 寫法，在標準兼容瀏覽器中被被忽略，但是 IE7 卻不這么認為。對于 >body ，它會將缺失的選擇符用全局選擇符 * 代替，也就是將其處理成了 *>body，而且不光對于 > 選擇符，+,~ 選擇符中這個現象也存在。對于 html* ，由于 html 和 * 之間沒有空格，所以也是一種 CSS 語法錯誤，但 IE7 不會忽略，而是錯誤地認為這里有一個空格。對于第三種 *+html，IE7 認為 html 前面的 DTD 聲明也是一個元素，所以 html 會被選中，這三種方法中只有這一種方法是合法的 CSS 寫法，也就是說可以通過校驗器的驗證，因此也是作者推薦的 hack 用法。

最后作者給出了最佳方式：

IE 6 and below
U * html {} to lect the html element.
IE 7 and below
U *+html, * html {} to lect the html element.
IE 7 only
U *+html {} to lect the html element.
IE 7 and modern browrs only
U html>body {} to lect the body element.
Modern browrs only (not IE 7)
U html>/**/body {} to lect the body element.

The IE7 CSS Hack(!important在ie7.0的hack方法)

由 于ie對!important識別存在bug,而現在大部分網頁標準設計師又通過這個bug來兼容ie和ff,但是ie7.0把這個bug給修復了,所以 問題又出現了,怎么兼容ie.7.0的同時又能兼容ie6.0和ff?正所謂"上有政策,下有對策",國外的網頁標準設計師通過使用css filter的辦法(并不是css hack)來兼容ie7.0,ie6.0和ff,以下為作者從國外網站的翻譯.

新建一個css樣式如下：
插入代碼：

#item {
width: 200px;
height: 200px;
background: red;
}

新建一個div,并使用前面定義的css的樣式：
插入代碼：

some text here

在body表現這里加入lang屬性,中文為zh：
插入代碼：

現在對div元素再定義一個樣式：
插入代碼：
[/code]
*:lang(en) #item{
background:green !important;
}
[/code]
這樣做是為了用!important覆蓋原來的css樣式,由于:lang選擇器ie7.0并不支持,所以對這句話不會有任何作用,于是也達到了ie6.0下同樣的效果,但是很不幸地的是,safari同樣不支持此屬性,所以需要加入以下css樣式：
插入代碼：

#item:empty {
background: green !important
}

:empty選擇器為css3的規范,盡管safari并不支持此規范,但是還是會選擇此元素,不管是否此元素存在,現在綠色會現在在除ie各版本以外的瀏覽器上,并在以下瀏覽器和操作系統下通過測試：

ie7 beta 2 preview/win
ie5.01+/win
firefox 1.5/win
opera 8.5/win & linux
netscape 7.01, 8/win
mozilla 1.7.12/win & linux
safari 2/mac
firefox 1.0.4/linux
epiphany 1.4.8/linux
galeon 1.3.20/linux

Screenshot of the IE7 css hack in IE7

Screenshot of the IE7 css hack in Firefox 1.5

按照遠作者的說法其實這不能算是一種hack,應該屬于filter,不過這似乎并不是最重要的,因為通過這個辦法,我們又一次了解決IE6.0,IE7.0和其他瀏覽器之間的兼容性問題,而且使用:lang-filter這辦法,在今后的一段時間內都會有用.

文章來自：http://www.aixq.com/read.php?704

firefox,ie7,ie6兼容性問題，和css解決方案
注：IE都能識別*;標準瀏覽器(如Firefox,Opera,Netscape)不能識別*；IE6能識別*，但不能識別 !important,IE7能識別*，也能識別!important;FF不能識別*，但能識別!important;

寫兩句代碼來控制一個屬性，區別Firefox與IE6：
background:orange;*background:blue;

//這一句代碼寫出來時，你用firefox或其它非IE瀏覽時，會發現，寫了該代碼的區域背景是橙色的，如果用IE瀏覽，卻是藍色的，這是因為IE都能識別*;標準瀏覽器(如Firefox,Opera,Netscape)不能識別*；

寫兩句代碼來控制一個屬性，區別IE7與IE6：
background:green !important;background:blue;

//這一句代碼寫出來時，你用IE7瀏覽，會發現，寫了該代碼的區域背景是綠色的，如果用IE6瀏覽，卻是藍色的，這是因為IE7能識別! important*，一但識別了，就執行，忽略了后面的那一句，但IE6卻不能識別!important，所以前面部分跳過，直接執行了后半部份。

寫兩句代碼來控制一個屬性，區別Firefox與IE：
background:orange; *background:green;

//這一句代碼寫出來時，你用Firefox瀏覽，會發現背景是橙色的，而IE里卻是綠色的，很簡單，因為Firefox不能識別*，而IE6，IE7都可以識*

寫三句代碼來控制一個屬性，區別Firefox，IE7，IE6：
background:orange;*background:green !important;*background:blue;

//這一句會使在Firefox在，背景呈橙色，IE7中為綠色，IE6中為藍色，道理和前面一樣，Firefox不能識別*，所以后面兩句都不執行，直 接執行第一句，IE7當然也能執行第一行代碼，但是因為第二句，他也能識別，所以就執行了第二句代碼，把前面的效果給過濾了，而最后一句，IE7是不能識 別的。IE6不能識別!imprtant，本來運行了第一句代碼了，第二句不能識別，那就理所當然的執行了最后一句。

<style>body{color:00ff00;}</style>
<!--[if IE 6]>
<style>body{color:#ff6600;}</style>
<![endif]-->
<!--[if IE 7]>
<style>body{color:#ff0000;}</style>
<![endif]-->

css常見的hack方法有哪些

CSS Hack大致有3種表現形式，CSS屬性前綴法、選擇器前綴法以及IE條件注釋法（即HTML頭部引用if IE）Hack，實際項目中CSS Hack大部分是針對IE瀏覽器不同版本之間的表現差異而引入的。 屬性前綴法(即類內部Hack)：例如 IE6能識別下劃線"_"和星號" * "，IE7能識別星號" * "，但不能識別下劃線"_"，IE6~IE10都認識"\9"，但firefox前述三個都不能認識。 選擇器前綴法(即選擇器Hack)：例如 IE6能識別*html .class{}，IE7能識別*+html .class{}或者*:first-child+html .class{}。 IE條件注釋法(即HTML條件注釋Hack)：針對所有IE(注：IE10+已經不再支持條件注釋)： <!--[if IE]>IE瀏覽器顯示的內容 <![endif]-->，針對IE6及以下版本： <!--[if lt IE 6]>只在IE6-顯示的內容 <![endif]-->。這類Hack不僅對CSS生效，對寫在判斷語句里面的所有代碼都會生效。 具體不展開，可看資料搜索“史上最全的CSS hack方式一覽”

什么是Css Hack？ie6，7，8的Hack分別是什么？

在我們制作頁面時CSS hack由于不同的瀏覽器，比如Internet Explorer,Mozilla Firefox等，對CSS的解析認識不一樣，因此會導致生成的頁面效果不一樣，得不到我們所需要的頁面效果。 這個時候我們就需要針對不同的瀏覽器去寫不同的CSS，讓它能夠同時兼容不同的瀏覽器，能在不同的瀏覽器中也能得到我們想要的頁面效果。
CSS Hack大致有3種表現形式，屬性級Hack、選擇器Hack以及IE條件Hack
注意：盡可能減少對CSS Hack的使用。
原理：
由于不同的瀏覽器對CSS的支持及解析結果不一樣，還由于CSS中的優先級的關系。我們就可以根據這個來針對不同的瀏覽器來寫不同的CSS。
IE hack
代碼如下:
<!--[if <keywords>? IE <version>?]>
HTML代碼塊
<![endif]-->

什么叫做css hack

css hack的解釋我就不多說了，你隨便百度就能搜到詳細的規范解答，我就通俗的解釋一下好了，因為不同瀏覽器或者瀏覽器的不同版本對部分css樣式的解析效果不相同，比如某個樣式設置margin-left:5px;有的瀏覽器就會正常顯示效果，而有的瀏覽器就會顯示為margin-left:10px;的效果，為了讓我們寫出來的效果在不同瀏覽器中顯示都一樣，就需要針對不同瀏覽器來寫樣式，也就是這個樣式只有這個瀏覽器能讀取調用，那個樣式只有那個瀏覽器能讀取調用，互相不會沖突

css里面怎么用hack清楚浮動

1、子任用的最多的一種 clearfix hack
view sourceprint
01..clearfix:after{
02.display:block;
03.clear:both;
04.height:0;
05.line-height:0;
06.visibility:hidden;
07.content:".";
08.font-size:0;
09.}
10..clearfix{
11.zoom:1;
12.}
2、比較常見的另一種 clearfix hack
view sourceprint
01..clearfix:after {
02.content: ".";
03.display: block;
04.clear: both;
05.visibility: hidden;
06.line-height: 0;
07.height: 0;
08.}
09..clearfix {
10.display: inline-block;
11.}
12.html[xmlns] .clearfix {
13.display: block;
14.}
15.* html .clearfix {
16.height: 1%;
17.}
最近比較火的一種 clearfix hack
作者博客：A new micro clearfix hack
view sourceprint
01..cf:before,
02..cf:after {
03.content: " ";
04.display: table;
05.}
06..cf:after {
07.clear: both;
08.}
09..cf {
10.*zoom: 1;
11.}
其他兩種方法 clearfix hack
摘自：XHTML float clear without markup test
.clearfix with IE8
view sourceprint
01./* full clearfix */
02./* add to floating elements which shall clear floating after themlves */
03.* html .clearfix {
04.height: 1%; /* IE5-6 */
05.}
06.*+html .clearfix {
07.display: inline-block; /* IE7not8 */
08.}
09..clearfix:after { /* FF, IE8, O, S, etc. */
10.content: ".";
11.display: block;
12.height: 0;
13.clear: both;
14.visibility: hidden;
15.}
已測試版本:
FF3.6, 3.5, 3, 2.0.0.16, 1.5, Camino
IE9PR3, 8, 7, 6, 5.5, 5.01, IE5Mac
Opera 9.51, 9.27, 8.5
Chrome 5
Safari 3.1.1 (PC, should work on Mac too)