HACK技巧

時間 2019-12-07

標籤 hack 技巧简体版

原文原文鏈接

CSS HACK技巧

關於CSS對各個瀏覽器兼容已是老生常談的問題了, 網絡上的教程遍地都是.如下內容沒有太多新穎, 純屬我的總結, 但願能對初學者有必定的幫助. css

1、CSS HACK html

HACK概念：瀏覽器

不一樣的瀏覽器，好比Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等，對CSS的解析認識不同，所以會致使生成的頁面效果不同，得不到咱們所須要的頁面效果。這個時候咱們就須要針對不一樣的瀏覽器去寫不一樣的CSS，讓它可以同時兼容不一樣的瀏覽器，能在不一樣的瀏覽器中也能獲得咱們想要的頁面效果。這個針對不一樣的瀏覽器寫不一樣的CSS code的過程，就叫CSS hack, 網絡

HACK規則： app

IE都能識別*;標準瀏覽器(如FF)不能識別*； ide

IE6能識別*，但不能識別 !important, 佈局

IE7能識別*，也能識別!important; url

FF不能識別*，但能識別!important; spa

IE6 IE7 FF firefox

* √ √ ×

!important × √ √

瀏覽器優先級別:FF<IE7<IE6,CSS hack書寫順序通常爲FF IE7 IE6

例：

　　以: " #demo {width:100px;} "爲例;

　　 #demo {width:100px;}

　　 * html #demo {width:120px;}

　　 *+html #demo {width:130px;}

　　 ---------------

　　因此最後,#demo的寬度在三個瀏覽器的解釋爲:

　　FIREFOX:100px;

　　 ie6:120px;

　　 ie7:130px;以

下兩種方法幾乎能解決現今全部HACK.

1, !important

隨着IE7對!important的支持, !important 方法如今只針對IE6的HACK.(注意寫法.記得該聲明位置須要提早.)

<style>

#wrapper

{

width: 100px!important; /* IE7+FF */

width: 80px; /* IE6 */

}

</style>

2, IE6/IE77對FireFox

*+html 與 *html 是IE特有的標籤, firefox 暫不支持.而*+html 又爲 IE7特有標籤.

<style>

#wrapper

{

#wrapper { width: 120px; } /* FireFox */

*html #wrapper { width: 80px;} /* ie6 fixed */

*+html #wrapper { width: 60px;} /* ie7 fixed, 注意順序 */

}

</style>

注意:

*+html 對IE7的HACK 必須保證HTML頂部有以下聲明：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"　"http://www.w3.org/TR/html4/loose.dtd">

2、萬能 float 閉合

關於 clear float 的原理可參見 [How To Clear Floats Without Structural Markup]

將如下代碼加入Global CSS 中,給須要閉合的div加上 class="clearfix" 便可,屢試不爽.

<style>

/* Clear Fix */

.clearfix:after

{

content:".";

display:block;

height:0;

clear:both;

visibility:hidden;

}

.clearfix

{

display:inline-block;

}

/* Hide from IE Mac */

.clearfix {display:block;}

/* End hide from IE Mac */

/* end of clearfix */

</style>

3、其餘兼容技巧

ul標籤在Mozilla中默認是有padding值的，而在IE中只有margin有值。因此先定義ul{margin:0;padding:0;}就能解決大部分問題。也可用!important解決

2. 居中問題.

1).垂直居中.將 line-height 設置爲當前 div 相同的高度, 再經過 vertical-align: middle.( 注意內容不要換行.)

2).水平居中. margin: 0 auto;(固然不是萬能)

你能夠把html的body以內任何項目置於中，該項目將自動得到相等的左右邊界值從而保證了居中顯示。不過，這在IE6以前版本的瀏覽器中仍然有問題，將不會居中，所以必須修改以下：

body {

text-align: center;

}

#content {

text-align: left;

width: 700px;

margin: 0 auto;

}

對body的設定將致使主體內容居中，可是連全部的文字也居中了，這恐怕不是你想要的效果，爲此#content 的div還要指定一個值：text-align: left

3. IE5 和IE6的BOX解釋不一致

IE5下div{width:300px;margin:0 10px 0 10px;}

div的寬度會被解釋爲300px-10px(右填充)-10px(左填充)最終div的寬度爲280px，

而在IE6和其餘瀏覽器上寬度則是以300px+10px(右填充)+10px(左填充)=320px來計算的。

這時咱們能夠作以下修改div{width:300px!important;width :340px;margin:0 10px 0 10px}

關於這個是什麼我也不太明白，只知道IE5和firefox都支持但IE6不支持，若是有人理解的話，請告訴我一聲，謝了！：）

4. FORM標籤與ul 標籤的事先聲明

這2個標籤在IE中,將會自動margin一些邊距,而在FF中margin則是0,所以,若是想顯示一致,因此最好在css中指定margin和 padding,針對上面兩個問題,個人css中通常首先都使用這樣的樣式ul,form{margin:0;padding:0;}給定義死了,因此後面就不會爲這個頭疼了.

5. cursor

cursor: pointer 能夠同時在 IE FF 中顯示遊標手指狀， hand 僅 IE 能夠

6. 文字過長

若是文字過長，則將過長的部分變成省略號顯示：IE5，FF無效，但能夠隱藏，IE6有效<DIV STYLE=「width：120px；height：50px；border：1px solid blue；overflow：hidden；text-overflow：ellipsis」> <NOBR>就是好比有一行文字，很長，表格內一行顯示不下。Phontol.com</NOBR>

固定寬度漢字截斷：overflow：hidden；text-overflow：ellipsis；white-space：nowrap；（不過只能處理文字在一行上的截斷，不能處理多行。）（IE5以上）FF不能，它只隱藏。

7. min-

IE不認得min-這個定義，但實際上它把正常的width和height看成有min的狀況來使。這樣問題就大了，若是隻用寬度和高度，正常的瀏覽器裏這兩個值就不會變，若是隻用min-width和min-height的話，IE下面根本等於沒有設置寬度和高度。

好比要設置背景圖片，這個寬度是比較重要的。要解決這個問題，能夠這樣：

#box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}

8. 浮動ie產生的雙倍距離

#box{ float:left; width:100px; margin:0 0 0 100px; //這種狀況之下IE會產生200px的距離 display:inline; //使浮動忽略}

這裏細說一下block與inline兩個元素：block元素的特色是,老是在新行上開始,高度,寬度,行高,邊距均可以控制(塊元素);Inline元素的特色是,和其餘元素在同一行上,不可控制(內嵌元素);

#box{ display:block; //能夠爲內嵌元素模擬爲塊元素 display:inline; //實現同一行排列的效果 display:table;

10. 爲何FF下文本沒法撐開容器的高度

標準瀏覽器中固定高度值的容器是不會象IE6裏那樣被撐開的,那我又想固定高度,又想能被撐開須要怎樣設置呢？辦法就是去掉height設置min- height:200px; 這裏爲了照顧不認識min-height的IE6 能夠這樣定義:

{

height:auto!important;

height:200px;

min-height:200px;

}

11. 清除浮動

.hackbox{ display:table; //將對象做爲塊元素級的表格顯示}或者.hackbox{ clear:both;}

或者加入:after（僞對象）,設置在對象後發生的內容，一般和content配合使用，IE不支持此僞對象，非Ie 瀏覽器支持，

所以並不影響到IE/WIN瀏覽器。這種的最麻煩的......#box:after{ content: "."; display: block; height: 0; clear: both; visibility: hidden;}

8 DIV浮動IE文本產生3象素的bug

左邊對象浮動，右邊採用外補丁的左邊距來定位，右邊對象內的文本會離左邊有3px的間距.

#box{ float:left; width:800px;}#left{ float:left; width:50%;}#right{ width:50%;}*html #left{ margin-right:-3px; //這句是關鍵}

HTML代碼<div id="box"> <div id="left"></div> <div id="right"></div></div>

9 屬性選擇器(這個不能算是兼容,是隱藏css的一個bug)

p[id]{}div[id]{}

這個對於IE6.0和IE6.0如下的版本都隱藏,FF和OPera做用

屬性選擇器和子選擇器仍是有區別的,子選擇器的範圍從形式來講縮小了,屬性選擇器的範圍比較大,如p[id]中,全部p標籤中有id的都是一樣式的.

10 IE捉迷藏的問題

當div應用複雜的時候每一個欄中又有一些連接，DIV等這個時候容易發生捉迷藏的問題。

有些內容顯示不出來，當鼠標選擇這個區域是發現內容確實在頁面。

解決辦法：對#layout使用line-height屬性或者給#layout使用固定高和寬。頁面結構儘可能簡單。

11 高度不適應

高度不適應是當內層對象的高度發生變化時外層高度不能自動進行調節，特別是當內層對象使用

margin 或paddign 時。

例：

<p>p對象中的內容</p>

</div>

CSS：#box {background-color:#eee; }

#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }

解決方法：在P對象上下各加2個空的div對象CSS代碼：.1{height:0px;overflow:hidden;}或者爲DIV加上border屬性。

/*IE與Firefox的CSS兼容大全*/

1.DOCTYPE 影響 CSS 處理

2.FF: div 設置 margin-left, margin-right 爲 auto 時已經居中, IE 不行

3.FF: body 設置 text-align 時, div 須要設置 margin: auto(主要是 margin-left,margin-right) 方可居中

4.FF: 設置 padding 後, div 會增長 height 和 width, 但 IE 不會, 故須要用 !important 多設一個 height 和 width

5.FF: 支持 !important, IE 則忽略, 可用 !important 爲 FF 特別設置樣式

6.div 的垂直居中問題: vertical-align:middle; 將行距增長到和整個DIV同樣高 line-height:200px; 而後插入文字，就垂直居中了。缺點是要控制內容不要換行

7.cursor: pointer 能夠同時在 IE FF 中顯示遊標手指狀， hand 僅 IE 能夠

8.FF: 連接加邊框和背景色，需設置 display: block, 同時設置 float: left 保證不換行。參照 menubar, 給 a 和 menubar 設置高度是爲了不底邊顯示錯位, 若不設 height, 能夠在 menubar 中插入一個空格。

9.在mozilla firefox和IE中的BOX模型解釋不一致致使相差2px解決方法：

div{margin:30px!important;margin:28px;}

注意這兩個margin的順序必定不能寫反，據阿捷的說法!important這個屬性IE不能識別，但別的瀏覽器能夠識別。因此在IE下其實解釋成這樣：

div{maring:30px;margin:28px}

重複定義的話按照最後一個來執行，因此不能夠只寫margin:XXpx!important;

10.IE5 和IE6的BOX解釋不一致

IE5下

div{width:300px;margin:0 10px 0 10px;}

div的寬度會被解釋爲300px-10px(右填充)-10px(左填充)最終div的寬度爲280px，而在IE6和其餘瀏覽器上寬度則是以300px+10px(右填充)+10px(左填充)=320px來計算的。這時咱們能夠作以下修改

div{width:300px!important;width /**/:340px;margin:0 10px 0 10px}

關於這個/**/是什麼我也不太明白，只知道IE5和firefox都支持但IE6不支持，若是有人理解的話，請告訴我一聲，謝了！：）

11.ul標籤在Mozilla中默認是有padding值的,而在IE中只有margin有值因此先定義

ul{margin:0;padding:0;}

就能解決大部分問題

注意事項：

1、float的div必定要閉合。

例如：(其中floatA、floatB的屬性已經設置爲float:left;)

<#div id="floatA" ></#div>

<#div id="floatB" ></#div>

<#div id="NOTfloatC" ></#div>

這裏的NOTfloatC並不但願繼續平移，而是但願往下排。

這段代碼在IE中毫無問題，問題出在FF。緣由是NOTfloatC並不是float標籤，必須將float標籤閉合。

在

<#div class="floatB"></#div>

<#div class="NOTfloatC"></#div>

之間加上

<#div class="clear"></#div>

這個div必定要注意聲明位置，必定要放在最恰當的地方，並且必須與兩個具備float屬性的div同級，之間不能存在嵌套關係，不然會產生異常。

而且將clear這種樣式定義爲爲以下便可：

.clear{

clear:both;}

此外，爲了讓高度能自動適應，要在wrapper裏面加上overflow:hidden;

當包含float的box的時候，高度自動適應在IE下無效，這時候應該觸發IE的layout私有屬性(萬惡的IE啊！)用zoom:1;能夠作到，這樣就達到了兼容。

例如某一個wrapper以下定義：

.colwrapper{

overflow:hidden;

zoom:1;

margin:5px auto;}

2、margin加倍的問題。

設置爲float的div在ie下設置的margin會加倍。這是一個ie6都存在的bug。

解決方案是在這個div裏面加上display:inline;

例如：

<#div id="imfloat"></#div>

相應的css爲

#IamFloat{

float:left;

margin:5px;/*IE下理解爲10px*/

display:inline;/*IE下再理解爲5px*/}

3、關於容器的包涵關係

不少時候，尤爲是容器內有平行佈局，例如兩、三個float的div時，寬度很容易出現問題。在IE中，外層的寬度會被內層更寬的div擠破。必定要用Photoshop或者Firework量取像素級的精度。

4、關於高度的問題

若是是動態地添加內容，高度最好不要定義。瀏覽器能夠自動伸縮，然而若是是靜態的內容，高度最好定好。（彷佛有時候不會自動往下撐開，不知道具體怎麼回事）

5、最狠的手段 - !important;

若是實在沒有辦法解決一些細節問題,能夠用這個方法.FF對於"!important"會自動優先解析,然而IE則會忽略.以下

.tabd1{

background:url(/res/images/up/tab1.gif) no-repeat 0px 0px !important; /*Style for FF*/

background:url(/res/images/up/tab1.gif) no-repeat 1px 0px; /* Style for IE */}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。