數位行銷
網路行銷
1.div的垂直居中問題
vertical-align:middle; 將行距增加到和整個DIV一樣高 line-height:200px; 然後插入文字,就垂直居中了。缺點是要控制內容不要換行
vertical-align:middle; 將行距增加到和整個DIV一樣高 line-height:200px; 然後插入文字,就垂直居中了。缺點是要控制內容不要換行
2. margin加倍的問題
設置為float的div在ie下設置的margin會加倍。這是一個ie6都存在的bug。解決方案是在這個div裡面加上display:inline;
例如:
<#div id=imfloat>
相應的css為
#IamFloat{
float:left;
margin:5px;/*IE下理解為10px*/
display:inline;/*IE下再理解为5px*/}
3.浮動ie產生的雙倍距離
#box{ float:left; width:100px; margin:0 0 0 100px; //这种情况之下IE会产生200px的距离 display:inline; //使浮动忽略}
這裡細說一下block與inline兩個元素:block元素的特點是,總是在新行上開始,高度,寬度,行高,邊距都可以控制(塊元素);Inline元素的特點是,和其他元素在同一行上,不可控制(內嵌元素);
#box{ display:block; //可以為內嵌元素模擬為塊元素 display:inline; //實現同一行排列的效果 diplay:table;
4 IE與寬度和高度的問題
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;}
5.頁面的最小寬度
min -width是個非常方便的CSS命令,它可以指定元素最小也不能小於某個寬度,這樣就能保證排版一直正確。但IE不認得這個,而它實際上把width當 做最小寬度來使。為了讓這一命令在IE上也能用,可以把一個
放到 標籤下,然後為div指定一個類, 然後CSS這樣設計:
#container{ min-width: 600px; width:expression(document.body.clientWidth < 600? "600px": "auto" );}
第一個min-width是正常的;但第2行的width使用了Javascript,這只有IE才認得,這也會讓你的HTML文檔不太正規。它實際上通過Javascript的判斷來實現最小寬度。
6.DIV浮動IE文本產生3象素的bug
左邊對像浮動,右邊採用外補丁的左邊距來定位,右邊對像內的文本會離左邊有3px的間距.
#box{ float:left; width:800px;}
#left{ float:left; width:50%;}
#right{ width:50%;}
*html #left{ margin-right:-3px; //这句是关键}
7.IE捉迷藏的問題
當div應用複雜的時候每個欄中又有一些鏈接,DIV等這個時候容易發生捉迷藏的問題。
有些內容顯示不出來,當鼠標選擇這個區域是發現內容確實在頁面。 解決辦法:對#layout使用line-height屬性 或者給#layout使用固定高和寬。頁面結構盡量簡單。
8.float的div閉合;清除浮動;自適應高度;
1 例如:<#div id=」floatA」 ><#div id=」floatB」 ><#div id=」 NOTfloatC」 >這裡的NOTfloatC並不希望繼續平移,而是希望往下排。(其中floatA、floatB的屬性已經設置為 float:left;)
這段代碼在IE中毫無問題,問題出在FF。原因是NOTfloatC並非float標籤,必須將float標籤 閉合。在 <#div class=」floatB」> <#div class=」NOTfloatC」>之間加上 < #div class=」clear」>這個div一定要注意位置,而且必須與兩個具有float屬性的div同級,之間不能存在嵌套關係,否則會 產生異常。 並且將clear這種樣式定義為為如下即可: .clear{ clear:both;}
2作為外部 wrapper 的 div 不要定死高度,為了讓高度能自動適應,要在wrapper裡面加上overflow:hidden; 當包含float的 box的時候,高度自動適應在IE下無效,這時候應該觸發IE的layout私有屬性(萬惡的IE啊!)用zoom:1;可以做到,這樣就達到了兼容。
例如某一個wrapper如下定義:
.colwrapper{ overflow:hidden; zoom:1; margin:5px auto;}
3對於排版,我們用得最多的css描述可能就是float:left.有的時候我們需要在n欄的float div後面做一個統一的背景,譬如:
比 如我們要將page的背景設置成藍色,以達到所有三欄的背景顏色是藍色的目的,但是我們會發現隨著left center right的向下拉長,而 page居然保存高度不變,問題來了,原因在於page不是float屬性,而我們的page由於要居中,不能設置成float,所以我們應該這樣解決
再嵌入一個float left而寬度是100%的DIV解決之
4萬能float 閉合(非常重要!)
關 於 clear float 的原理可參見 [How To Clear Floats Without Structural Markup],將以下 代碼加入Global CSS 中,給需要閉合的div加上 class="clearfix" 即可,屢試不爽.
/* 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 */
或者這樣設置:.hackbox{ display:table; //将对象作为块元素级的表格显示}
11.高度不適應
高度不適應是當內層對象的高度發生變化時外層高度不能自動進行調節,特別是當內層對像使用margin 或paddign 時。
例:
#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屬性。
12 .IE6下為什麼圖片下有空隙產生
解 決這個BUG的方法也有很多,可以是改變html的排版,或者設置img 為display:block 或者設置vertical-align 屬性為 vertical-align:top | bottom |middle |text-bottom 都可以解決.
13.如何對齊文本與文本輸入框
加上 vertical-align:middle;
14.web標準中定義id與class有什麼區別嗎
一.web標準中是不容許重複ID的,比如 div id="aa" 不容許重複2次,而class 定義的是類,理論上可以無限重複, 這樣需要多次引用的定義便可以使用他.
二.屬性的優先級問題
ID 的優先級要高於class,看上面的例子
三.方便JS等客戶端腳本,如果在頁面中要對某個對象進行腳本操作,那麼可以給他定義一個ID,否則只能利用遍歷頁面元素加上指定特定屬性來找到它,這是相對浪費時間資源,遠遠不如一個ID來得簡單.
15. LI中內容超過長度後以省略號顯示的方法
此方法適用與IE與OP瀏覽器
16.為什麼web標準中IE無法設置滾動條顏色了
解決辦法是將body換成html
17.為什麼無法定義1px左右高度的容器
IE6下這個問題是因為默認的行高造成的,解決的方法也有很多,例如:overflow:hidden | zoom:0.08 | line-height:1px
18.怎麼樣才能讓層顯示在FLASH之上呢
解決的辦法是給FLASH設置透明
19.怎樣使一個層垂直居中於瀏覽器中
這裡我們使用百分比絕對定位,與外補丁負值的方法,負值的大小為其自身寬度高度除以二
#container{ min-width: 600px; width:expression(document.body.clientWidth < 600? "600px": "auto" );}
第一個min-width是正常的;但第2行的width使用了Javascript,這只有IE才認得,這也會讓你的HTML文檔不太正規。它實際上通過Javascript的判斷來實現最小寬度。
6.DIV浮動IE文本產生3象素的bug
左邊對像浮動,右邊採用外補丁的左邊距來定位,右邊對像內的文本會離左邊有3px的間距.
#box{ float:left; width:800px;}
#left{ float:left; width:50%;}
#right{ width:50%;}
*html #left{ margin-right:-3px; //这句是关键}
7.IE捉迷藏的問題
當div應用複雜的時候每個欄中又有一些鏈接,DIV等這個時候容易發生捉迷藏的問題。
有些內容顯示不出來,當鼠標選擇這個區域是發現內容確實在頁面。 解決辦法:對#layout使用line-height屬性 或者給#layout使用固定高和寬。頁面結構盡量簡單。
8.float的div閉合;清除浮動;自適應高度;
1 例如:<#div id=」floatA」 ><#div id=」floatB」 ><#div id=」 NOTfloatC」 >這裡的NOTfloatC並不希望繼續平移,而是希望往下排。(其中floatA、floatB的屬性已經設置為 float:left;)
這段代碼在IE中毫無問題,問題出在FF。原因是NOTfloatC並非float標籤,必須將float標籤 閉合。在 <#div class=」floatB」> <#div class=」NOTfloatC」>之間加上 < #div class=」clear」>這個div一定要注意位置,而且必須與兩個具有float屬性的div同級,之間不能存在嵌套關係,否則會 產生異常。 並且將clear這種樣式定義為為如下即可: .clear{ clear:both;}
2作為外部 wrapper 的 div 不要定死高度,為了讓高度能自動適應,要在wrapper裡面加上overflow:hidden; 當包含float的 box的時候,高度自動適應在IE下無效,這時候應該觸發IE的layout私有屬性(萬惡的IE啊!)用zoom:1;可以做到,這樣就達到了兼容。
例如某一個wrapper如下定義:
.colwrapper{ overflow:hidden; zoom:1; margin:5px auto;}
3對於排版,我們用得最多的css描述可能就是float:left.有的時候我們需要在n欄的float div後面做一個統一的背景,譬如:
比 如我們要將page的背景設置成藍色,以達到所有三欄的背景顏色是藍色的目的,但是我們會發現隨著left center right的向下拉長,而 page居然保存高度不變,問題來了,原因在於page不是float屬性,而我們的page由於要居中,不能設置成float,所以我們應該這樣解決
再嵌入一個float left而寬度是100%的DIV解決之
4萬能float 閉合(非常重要!)
關 於 clear float 的原理可參見 [How To Clear Floats Without Structural Markup],將以下 代碼加入Global CSS 中,給需要閉合的div加上 class="clearfix" 即可,屢試不爽.
/* 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 */
或者這樣設置:.hackbox{ display:table; //将对象作为块元素级的表格显示}
11.高度不適應
高度不適應是當內層對象的高度發生變化時外層高度不能自動進行調節,特別是當內層對像使用margin 或paddign 時。
例:
#box {background-color:#eee; }
#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }
p對像中的內容
解決方法:在P對像上下各加2個空的div對像CSS代碼:.1{height:0px;overflow:hidden;}或者為DIV加上border屬性。
12 .IE6下為什麼圖片下有空隙產生
解 決這個BUG的方法也有很多,可以是改變html的排版,或者設置img 為display:block 或者設置vertical-align 屬性為 vertical-align:top | bottom |middle |text-bottom 都可以解決.
13.如何對齊文本與文本輸入框
加上 vertical-align:middle;
14.web標準中定義id與class有什麼區別嗎
一.web標準中是不容許重複ID的,比如 div id="aa" 不容許重複2次,而class 定義的是類,理論上可以無限重複, 這樣需要多次引用的定義便可以使用他.
二.屬性的優先級問題
ID 的優先級要高於class,看上面的例子
三.方便JS等客戶端腳本,如果在頁面中要對某個對象進行腳本操作,那麼可以給他定義一個ID,否則只能利用遍歷頁面元素加上指定特定屬性來找到它,這是相對浪費時間資源,遠遠不如一個ID來得簡單.
15. LI中內容超過長度後以省略號顯示的方法
此方法適用與IE與OP瀏覽器
16.為什麼web標準中IE無法設置滾動條顏色了
解決辦法是將body換成html
17.為什麼無法定義1px左右高度的容器
IE6下這個問題是因為默認的行高造成的,解決的方法也有很多,例如:overflow:hidden | zoom:0.08 | line-height:1px
18.怎麼樣才能讓層顯示在FLASH之上呢
解決的辦法是給FLASH設置透明
19.怎樣使一個層垂直居中於瀏覽器中
這裡我們使用百分比絕對定位,與外補丁負值的方法,負值的大小為其自身寬度高度除以二
FF与IE
1. Div居中問題
div設置 margin-left, margin-right 為 auto 時已經居中,IE 不行,IE需要設定body居中,首先在父級元素定義text-algin: center;這個的意思就是在父級元素內的內容居中。
2.鏈接(a標籤)的邊框與背景
a 鏈接加邊框和背景色,需設置 display: block, 同時設置 float: left 保證不換行。參照 menubar, 給 a 和 menubar 設置高度是為了避免底邊顯示錯位, 若不設 height, 可以在 menubar 中插入一個空格。
3.超鏈接訪問過後hover樣式就不出現的問題
被點擊訪問過的超鏈接樣式不在具有hover和active了,很多人應該都遇到過這個問題,解決方法是改變CSS屬性的排列順序: L-V-H-A
Code:
4. 游標手指cursor
cursor: pointer 可以同時在 IE FF 中顯示游標手指狀, hand 僅 IE 可以
5.UL的padding與margin
ul標籤在FF中默認是有padding值的,而在IE中只有margin默認有值,所以先定義 ul{margin:0;padding:0;}就能解決大部分問題
6. FORM標籤
這 個標籤在IE中,將會自動margin一些邊距,而在FF中margin則是0,因此,如果想顯示一致,所以最好在css中指定margin和 padding,針對上面兩個問題,我的css中一般首先都使用這樣的樣式ul,form{margin:0;padding:0;}給定義死了,所以後 面就不會為這個頭疼了.
7. BOX模型解釋不一致問題
在FF和IE 中的BOX模型解釋不一致導致相差2px解決方法:div{margin:30px!important;margin:28px;} 注意這兩個 margin的順序一定不能寫反, important這個屬性IE不能識別,但別的瀏覽器可以識別。所以在IE下其實解釋成這樣: div {maring:30px;margin:28px}重複定義的話按照最後一個來執行,所以不可以只寫margin:xx px!important;
#box{ width:600px; //for ie6.0- w\idth:500px; //for ff+ie6.0}
#box{ width:600px!important //for ff width:600px; //for ff+ie6.0 width /**/:500px; //for ie6.0-}
8.屬性選擇器(這個不能算是兼容,是隱藏css的一個bug)
p[id]{}div[id]{}
這個對於IE6.0和IE6.0以下的版本都隱藏,FF和OPera作用.屬性選擇器和子選擇器還是有區別的,子選擇器的範圍從形式來說縮小了,屬性選擇器的範圍比較大,如p[id]中,所有p標籤中有id的都是同樣式的.
9.最狠的手段 - !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 */}
值得注意的是,一定要將xxxx !important 這句放置在另一句之上,上面已經提過
10.IE,FF的默認值問題
或 許你一直在抱怨為什麼要專門為IE和FF寫不同的CSS,為什麼IE這樣讓人頭疼,然後一邊寫css,一邊咒罵那個可惡的M$ IE.其實對於css的標 准支持方面,IE並沒有我們想像的那麼可惡,關鍵在於IE和FF的默認值不一樣而已,掌握了這個技巧,你會發現寫出兼容FF和IE的css並不是那麼困 難,或許對於簡單的css,你完全可以不用」!important」這個東西了。
我們都知道,瀏覽器在顯示網頁的時候,都會根據網頁的 css樣式表來決定如何顯示,但是我們在樣式表中未必會將所有的元素都進行了具體的描述,當然也沒有必要那麼做,所以對於那些沒有描述的屬性,瀏覽器將采 用內置默認的方式來進行顯示,譬如文字,如果你沒有在css中指定顏色,那麼瀏覽器將採用黑色或者系統顏色來顯示,div或者其他元素的背景,如果在 css中沒有被指定,瀏覽器則將其設置為白色或者透明,等等其他未定義的樣式均如此。所以有很多東西出現FF和IE顯示不一樣的根本原因在於它們的默認顯 示不一樣,而這個默認樣式該如何顯示我知道在w3中有沒有對應的標準來進行規定,因此對於這點也就別去怪罪IE了。
11.為什麼FF下文本無法撐開容器的高度
標準瀏覽器中固定高度值的容器是不會像IE6里那樣被撐開的,那我又想固定高度,又想能被撐開需要怎樣設置呢?辦法就是去掉height設置min-height:200px; 這裡為了照顧不認識min-height的IE6 可以這樣定義:
{
height:auto!important;
height:200px;
min-height:200px;
}
12.FireFox下如何使連續長字段自動換行
眾所周知IE中直接使用 word-wrap:break-word 就可以了, FF中我們使用JS插入 的方法來解決
/* function toBreakWord(el, intLen){
var ōbj=document.getElementById(el);
var strContent=obj.innerHTML;
var strTemp="";
while(strContent.length>intLen){
strTemp+=strContent.substr(0,intLen)+" ";
strContent=strContent.substr(intLen,strContent.length);
}
strTemp+=" "+strContent;
obj.innerHTML=strTemp;
}
if(document.getElementById && !document.all) toBreakWord("ff", 37);
/* ]]> */
13.為什麼IE6下容器的寬度和FF解釋不同呢
問 題的差別在於容器的整體寬度有沒有將邊框(border)的寬度算在其內,這裡IE6解釋為200PX ,而FF則解釋為220PX,那究竟是怎麼導致的 問題呢?大家把容器頂部的xml去掉就會發現原來問題出在這,頂部的申明觸發了IE的qurks mode,關於qurks mode、 standards mode的相關知識
2.鏈接(a標籤)的邊框與背景
a 鏈接加邊框和背景色,需設置 display: block, 同時設置 float: left 保證不換行。參照 menubar, 給 a 和 menubar 設置高度是為了避免底邊顯示錯位, 若不設 height, 可以在 menubar 中插入一個空格。
3.超鏈接訪問過後hover樣式就不出現的問題
被點擊訪問過的超鏈接樣式不在具有hover和active了,很多人應該都遇到過這個問題,解決方法是改變CSS屬性的排列順序: L-V-H-A
Code:
4. 游標手指cursor
cursor: pointer 可以同時在 IE FF 中顯示游標手指狀, hand 僅 IE 可以
5.UL的padding與margin
ul標籤在FF中默認是有padding值的,而在IE中只有margin默認有值,所以先定義 ul{margin:0;padding:0;}就能解決大部分問題
6. FORM標籤
這 個標籤在IE中,將會自動margin一些邊距,而在FF中margin則是0,因此,如果想顯示一致,所以最好在css中指定margin和 padding,針對上面兩個問題,我的css中一般首先都使用這樣的樣式ul,form{margin:0;padding:0;}給定義死了,所以後 面就不會為這個頭疼了.
7. BOX模型解釋不一致問題
在FF和IE 中的BOX模型解釋不一致導致相差2px解決方法:div{margin:30px!important;margin:28px;} 注意這兩個 margin的順序一定不能寫反, important這個屬性IE不能識別,但別的瀏覽器可以識別。所以在IE下其實解釋成這樣: div {maring:30px;margin:28px}重複定義的話按照最後一個來執行,所以不可以只寫margin:xx px!important;
#box{ width:600px; //for ie6.0- w\idth:500px; //for ff+ie6.0}
#box{ width:600px!important //for ff width:600px; //for ff+ie6.0 width /**/:500px; //for ie6.0-}
8.屬性選擇器(這個不能算是兼容,是隱藏css的一個bug)
p[id]{}div[id]{}
這個對於IE6.0和IE6.0以下的版本都隱藏,FF和OPera作用.屬性選擇器和子選擇器還是有區別的,子選擇器的範圍從形式來說縮小了,屬性選擇器的範圍比較大,如p[id]中,所有p標籤中有id的都是同樣式的.
9.最狠的手段 - !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 */}
值得注意的是,一定要將xxxx !important 這句放置在另一句之上,上面已經提過
10.IE,FF的默認值問題
或 許你一直在抱怨為什麼要專門為IE和FF寫不同的CSS,為什麼IE這樣讓人頭疼,然後一邊寫css,一邊咒罵那個可惡的M$ IE.其實對於css的標 准支持方面,IE並沒有我們想像的那麼可惡,關鍵在於IE和FF的默認值不一樣而已,掌握了這個技巧,你會發現寫出兼容FF和IE的css並不是那麼困 難,或許對於簡單的css,你完全可以不用」!important」這個東西了。
我們都知道,瀏覽器在顯示網頁的時候,都會根據網頁的 css樣式表來決定如何顯示,但是我們在樣式表中未必會將所有的元素都進行了具體的描述,當然也沒有必要那麼做,所以對於那些沒有描述的屬性,瀏覽器將采 用內置默認的方式來進行顯示,譬如文字,如果你沒有在css中指定顏色,那麼瀏覽器將採用黑色或者系統顏色來顯示,div或者其他元素的背景,如果在 css中沒有被指定,瀏覽器則將其設置為白色或者透明,等等其他未定義的樣式均如此。所以有很多東西出現FF和IE顯示不一樣的根本原因在於它們的默認顯 示不一樣,而這個默認樣式該如何顯示我知道在w3中有沒有對應的標準來進行規定,因此對於這點也就別去怪罪IE了。
11.為什麼FF下文本無法撐開容器的高度
標準瀏覽器中固定高度值的容器是不會像IE6里那樣被撐開的,那我又想固定高度,又想能被撐開需要怎樣設置呢?辦法就是去掉height設置min-height:200px; 這裡為了照顧不認識min-height的IE6 可以這樣定義:
{
height:auto!important;
height:200px;
min-height:200px;
}
12.FireFox下如何使連續長字段自動換行
眾所周知IE中直接使用 word-wrap:break-word 就可以了, FF中我們使用JS插入 的方法來解決
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
/* function toBreakWord(el, intLen){
var ōbj=document.getElementById(el);
var strContent=obj.innerHTML;
var strTemp="";
while(strContent.length>intLen){
strTemp+=strContent.substr(0,intLen)+" ";
strContent=strContent.substr(intLen,strContent.length);
}
strTemp+=" "+strContent;
obj.innerHTML=strTemp;
}
if(document.getElementById && !document.all) toBreakWord("ff", 37);
/* ]]> */
13.為什麼IE6下容器的寬度和FF解釋不同呢
讓FireFox與IE兼容
問 題的差別在於容器的整體寬度有沒有將邊框(border)的寬度算在其內,這裡IE6解釋為200PX ,而FF則解釋為220PX,那究竟是怎麼導致的 問題呢?大家把容器頂部的xml去掉就會發現原來問題出在這,頂部的申明觸發了IE的qurks mode,關於qurks mode、 standards mode的相關知識
E7.0 出來了,對CSS的支持又有新問題。瀏覽器多了,網頁兼容性更差了,疲於奔命的還是我們 ,為解決IE7.0的兼容問題,找來了下面這篇文章: 現在我大 部分都是用!important來hack,對於ie6和firefox測試可以正常顯示,但是ie7對!important可以正確解釋,會導致頁面沒 按要求顯示!下面是三個瀏覽器的兼容性收集.
第一種,是CSS HACK的方法
height:20px; /*For Firefox*/
*height:25px; /*For IE7 & IE6*/
_height:20px; /*For IE6*/
注意順序。
這樣也屬於CSS HACK,不過沒有上面這樣簡潔。
#example { color: #333; } /* Moz */
* html #example { color: #666; } /* IE6 */
*+html #example { color: #999; } /* IE7 */
第二種,是使用IE專用的條件註釋
第三種,css filter的辦法,以下為經典從國外網站翻譯過來的。.
新建一個css樣式如下:
#item {
width: 200px;
height: 200px;
background: red;
}
新建一個div,並使用前面定義的css的樣式:
在body表現這裡加入lang屬性,中文為zh:
現在對div元素再定義一個樣式:
*:lang(en) #item{
background:green !important;
}
這樣做是為了用!important覆蓋原來的css樣式,由於:lang選擇器ie7.0並不支持,所以對這句話不會有任何作用,於是也達到了ie6.0下同樣的效果,但是很不幸地的是,safari同樣不支持此屬性,所以需要加入以下css樣式:
#item:empty {
background: green !important
}
:empty選擇器為css3的規範,儘管safari並不支持此規範,但是還是會選擇此元素,不管是否此元素存在,現在綠色會現在在除ie各版本以外的瀏覽器上。
對IE6和FF的兼容可以考慮以前的!important 個人比較喜歡用第一種,簡潔,兼容性比較好
第一種,是CSS HACK的方法
height:20px; /*For Firefox*/
*height:25px; /*For IE7 & IE6*/
_height:20px; /*For IE6*/
注意順序。
這樣也屬於CSS HACK,不過沒有上面這樣簡潔。
#example { color: #333; } /* Moz */
* html #example { color: #666; } /* IE6 */
*+html #example { color: #999; } /* IE7 */
第二種,是使用IE專用的條件註釋
第三種,css filter的辦法,以下為經典從國外網站翻譯過來的。.
新建一個css樣式如下:
#item {
width: 200px;
height: 200px;
background: red;
}
新建一個div,並使用前面定義的css的樣式:
some text here
在body表現這裡加入lang屬性,中文為zh:
現在對div元素再定義一個樣式:
*:lang(en) #item{
background:green !important;
}
這樣做是為了用!important覆蓋原來的css樣式,由於:lang選擇器ie7.0並不支持,所以對這句話不會有任何作用,於是也達到了ie6.0下同樣的效果,但是很不幸地的是,safari同樣不支持此屬性,所以需要加入以下css樣式:
#item:empty {
background: green !important
}
:empty選擇器為css3的規範,儘管safari並不支持此規範,但是還是會選擇此元素,不管是否此元素存在,現在綠色會現在在除ie各版本以外的瀏覽器上。
對IE6和FF的兼容可以考慮以前的!important 個人比較喜歡用第一種,簡潔,兼容性比較好
什麼是瀏覽器HACK:當我們使用不同的瀏覽器(Firefox IE7 IE6)訪問同一個網站,或者頁面的時候,會出現一些不兼容的問題,有的顯示出來正常,有的顯示出來不正常,我們在編寫CSS的時候會很惱火,剛修復了這 個瀏覽器的問題,結果另外一個瀏覽器卻出了新問題。而HACK就是一種辦法,能讓你在一個CSS裡面獨立的寫支持不同瀏覽器的樣式。這下就和諧了。呵呵!powered by 25175.net
最 近微軟發佈的IE7瀏覽器的兼容性確實給一些網頁製作人員添加了一個沉重的負擔,雖然IE7已經走向標準化,但還是有許多和FF不同的地方,所以需要用到 IE7的HACK,有許多朋友問過IE7的HACK是什麼,其實我也不知道。暫時還沒找到IE7專用的HACK。除了前面那片文章,《針對firefox ie6 ie7的css樣式》中的hack方式也是很好用的。
有一點邏輯思想的人都會知道可以用IE和FF的HACK結合起來使用,下面介紹三個HACK,例如:(適合新手,呵呵,高手就在這裡路過吧。)
程序代碼
第一個HACK,IE FF 所有瀏覽器 公用(其實也不算是HACK)
height:100px;
第二個HACK IE6專用
_height:100px;
第三個HACK IE6 IE7公用
*height:100px;
介紹完了這三個HACK了,下面我們再來看看如何在一個樣式裡分別給一個屬性定義IE6 IE7 FF專用的HACK,看下面的代碼,順序不能錯哦:
程序代碼
height:100px;
*height:120px;
_height:150px;
下面我簡單解釋一下各瀏覽器怎樣理解這三個屬性:
在FF下,第2、3個屬性FF不認識,所以它讀的是 height:100px;
在IE7下,第三個屬性IE7不認識,所以它讀第1、2個屬性,又因為第二個屬性覆蓋了第一個屬性,所以IE7最終讀出的是第2個屬性 *height:120px;
在IE6下,三個屬性IE6都認識,所以三個屬性都可以讀取,又因為第三個屬性覆蓋掉前2個屬性,所以IE6最終讀取的是第三個屬性。
1 針對firefox ie6 ie7的css樣式
現 在大部分都是用!important來hack,對於ie6和firefox測試可以正常顯示,但是ie7對!important可以正確解釋,會導致頁 面沒按要求顯示!找到一個針對IE7不錯的hack方式就是使用「*+html」,現在用IE7瀏覽一下,應該沒有問題了現在寫一個CSS可以這樣:
#1 { color: #333; } /* Moz */
* html #1 { color: #666; } /* IE6 */
*+html #1 { color: #999; } /* IE7 */
那麼在firefox下字體顏色顯示為#333,IE6下字體顏色顯示為#666,IE7下字體顏色顯示為#999。
2 css佈局中的居中問題
主要的樣式定義如下:
body {TEXT-ALIGN: center;}
#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }
說明:
首先在父級元素定義TEXT-ALIGN: center;這個的意思就是在父級元素內的內容居中;對於IE這樣設定就已經可以了。
但在mozilla中不能居中。解決辦法就是在子元素定義時候設定時再加上「MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 」
需要說明的是,如果你想用這個方法使整個頁面要居中,建議不要套在一個DIV裡,你可以依次拆出多個div,只要在每個拆出的div裡定義MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 就可以了。
3 盒模型不同解釋.
#box{
width:600px;
//for ie6.0- w\idth:500px;
//for ff+ie6.0
}
#box{
width:600px!important
//for ff
width:600px;
//for ff+ie6.0
width /**/:500px;
//for ie6.0-
}
4 浮動ie產生的雙倍距離
#box{ float:left; width:100px; margin:0 0 0 100px; //这种情况之下IE会产生200px的距离 display:inline; //使浮动忽略}
這裡細說一下block,inline兩個元素,Block元素的特點是:總是在新行上開始,高度,寬度,行高,邊距都可以控制(塊元素);Inline元素的特點是:和其他元素在同一行上,…不可控制(內嵌元素);
#box{ display:block; //可以為內嵌元素模擬為塊元素 display:inline; //實現同一行排列的的效果 diplay:table;
5 IE與寬度和高度的問題
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;}
6 頁面的最小寬度
min- width是個非常方便的CSS命令,它可以指定元素最小也不能小於某個寬度,這樣就能保證排版一直正確。但IE不認得這個,而它實際上把 width當做最小寬度來使。為了讓這一命令在IE上也能用,可以把一個
最 近微軟發佈的IE7瀏覽器的兼容性確實給一些網頁製作人員添加了一個沉重的負擔,雖然IE7已經走向標準化,但還是有許多和FF不同的地方,所以需要用到 IE7的HACK,有許多朋友問過IE7的HACK是什麼,其實我也不知道。暫時還沒找到IE7專用的HACK。除了前面那片文章,《針對firefox ie6 ie7的css樣式》中的hack方式也是很好用的。
有一點邏輯思想的人都會知道可以用IE和FF的HACK結合起來使用,下面介紹三個HACK,例如:(適合新手,呵呵,高手就在這裡路過吧。)
程序代碼
第一個HACK,IE FF 所有瀏覽器 公用(其實也不算是HACK)
height:100px;
第二個HACK IE6專用
_height:100px;
第三個HACK IE6 IE7公用
*height:100px;
介紹完了這三個HACK了,下面我們再來看看如何在一個樣式裡分別給一個屬性定義IE6 IE7 FF專用的HACK,看下面的代碼,順序不能錯哦:
程序代碼
height:100px;
*height:120px;
_height:150px;
下面我簡單解釋一下各瀏覽器怎樣理解這三個屬性:
在FF下,第2、3個屬性FF不認識,所以它讀的是 height:100px;
在IE7下,第三個屬性IE7不認識,所以它讀第1、2個屬性,又因為第二個屬性覆蓋了第一個屬性,所以IE7最終讀出的是第2個屬性 *height:120px;
在IE6下,三個屬性IE6都認識,所以三個屬性都可以讀取,又因為第三個屬性覆蓋掉前2個屬性,所以IE6最終讀取的是第三個屬性。
1 針對firefox ie6 ie7的css樣式
現 在大部分都是用!important來hack,對於ie6和firefox測試可以正常顯示,但是ie7對!important可以正確解釋,會導致頁 面沒按要求顯示!找到一個針對IE7不錯的hack方式就是使用「*+html」,現在用IE7瀏覽一下,應該沒有問題了現在寫一個CSS可以這樣:
#1 { color: #333; } /* Moz */
* html #1 { color: #666; } /* IE6 */
*+html #1 { color: #999; } /* IE7 */
那麼在firefox下字體顏色顯示為#333,IE6下字體顏色顯示為#666,IE7下字體顏色顯示為#999。
2 css佈局中的居中問題
主要的樣式定義如下:
body {TEXT-ALIGN: center;}
#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }
說明:
首先在父級元素定義TEXT-ALIGN: center;這個的意思就是在父級元素內的內容居中;對於IE這樣設定就已經可以了。
但在mozilla中不能居中。解決辦法就是在子元素定義時候設定時再加上「MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 」
需要說明的是,如果你想用這個方法使整個頁面要居中,建議不要套在一個DIV裡,你可以依次拆出多個div,只要在每個拆出的div裡定義MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 就可以了。
3 盒模型不同解釋.
#box{
width:600px;
//for ie6.0- w\idth:500px;
//for ff+ie6.0
}
#box{
width:600px!important
//for ff
width:600px;
//for ff+ie6.0
width /**/:500px;
//for ie6.0-
}
4 浮動ie產生的雙倍距離
#box{ float:left; width:100px; margin:0 0 0 100px; //这种情况之下IE会产生200px的距离 display:inline; //使浮动忽略}
這裡細說一下block,inline兩個元素,Block元素的特點是:總是在新行上開始,高度,寬度,行高,邊距都可以控制(塊元素);Inline元素的特點是:和其他元素在同一行上,…不可控制(內嵌元素);
#box{ display:block; //可以為內嵌元素模擬為塊元素 display:inline; //實現同一行排列的的效果 diplay:table;
5 IE與寬度和高度的問題
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;}
6 頁面的最小寬度
min- width是個非常方便的CSS命令,它可以指定元素最小也不能小於某個寬度,這樣就能保證排版一直正確。但IE不認得這個,而它實際上把 width當做最小寬度來使。為了讓這一命令在IE上也能用,可以把一個
放到 標籤下,然後為div指定一個類:
然後CSS這樣設計:
#container{
min-width: 600px;
width:e¬xpression(document.body.clientWidth < 600? 「600px」: 「auto」 );
}
第一個min-width是正常的;但第2行的width使用了Javascript,這只有IE才認得,這也會讓你的HTML文檔不太正規。它實際上通過Javascript的判斷來實現最小寬度。
7 清除浮動
.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代碼
9 屬性選擇器(這個不能算是兼容,是隱藏css的一個bug)
p[id]{}div[id]{}
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 時。例:
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瀏覽器(也就是IE下不顯示)
*:lang(zh) select {font:12px !important;} /*FF,OP可見*/
select:empty {font:12px !important;} /*safari可見*/
這裡select是選擇符,根據情況更換。第二句是MAC上safari瀏覽器獨有的。
僅IE7識別
*+html {…}
當面臨需要只針對IE7做樣式的時候就可以採用這個HACK。
IE6及IE6以下識別
* html {…}
這個地方要特別注意很多地主都寫了是IE6的HACK其實IE5.x同樣可以識別這個HACK。其它瀏覽器不識別。
html/**/ >body select {……}
這句與上一句的作用相同。
僅IE6不識別
select { display /*IE6不识别*/:none;}
這裡主要是通過CSS註釋分開一個屬性與值,流釋在冒號前。
僅IE6與IE5不識別
select/**/ { display /*IE6,IE5不识别*/:none;}
這裡與上面一句不同的是在選擇符與花括號之間多了一個CSS註釋。
僅IE5不識別
select/*IE5不識別*/ { display:none;}
這一句是在上一句中去掉了屬性區的註釋。只有IE5不識別
盒模型解決方法
selct {width:IE5.x宽度; voice-family :""}""; voice-family:inherit; width:正确宽度;}
盒模型的清除方法不是通過!important來處理的。這點要明確。
清除浮動
select:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
在Firefox中,當子級都為浮動時,那麼父級的高度就無法完全的包住整個子級,那麼這時用這個清除浮動的HACK來對父級做一次定義,那麼就可以解決這個問題 。
截字省略號
select { -o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; }
這個是在越出長度後會自行的截掉多出部分的文字,並以省略號結尾,很好的一個技術。只是目前Firefox並不支持。
只有Opera識別
@media all and (min-width: 0px){ select {……} }
針對Opera瀏覽器做單獨的設定。
以 上都是寫CSS中的一些HACK,建議遵循正確的標籤嵌套(div ul li 嵌套結構關係),這樣可以減少你使用Hack的頻率,不要進入理解誤區,並不是一個頁面就需要很多的hack來保持多瀏覽器兼容),很多情況下也許一個 Hack都不用也可以讓瀏覽器工作得非常好,這些都是用來解決局部的兼容性問題,如果希望把兼容性的內容也分離出來,不妨試一下下面的幾種過濾器。這些過 濾器有的是寫在CSS中通過過濾器導入特別的樣式,也有的是寫在HTML中的通過條件來鏈接或是導入需要的補丁樣式。
IE5.x的過濾器,只有IE5.x可見
@media tty {
i{content:"";/*" "*/}} @import 'ie5win.css'; /*";}
}/* */
IE5/MAC的過濾器,一般用不著
/**//*/
@import "ie5mac.css";
/**/
下 面是IE的條件註釋,個人覺得用條件註釋調用相應 Hack是比較完美的多瀏覽器兼容的解決辦法。把需要hack的地方單獨放到一個文件裡面,當瀏覽器版本符合的時候就可以調用那個被Hack的樣式,這樣 不僅使用起來非常方便,而且對於製作這個CSS本身來講,可以更嚴格的觀察到是否有必要使用hack,很多情況下,當我本人寫CSS如果把全部代碼包括 Hack都寫到一個CSS文件的時候的時候會很隨意,想怎麼Hack就怎麼Hack,而你獨立出來寫的時候,你就會不自覺的考慮是否有必要Hack,是先 Hack CSS?還是先把主CSS裡面的東西調整到盡可能的不需要Hack?當你僅用很少的Hack就讓很多瀏覽器很乖很聽話的時候,你是不是很有成就感呢?你知 道怎麼選擇了吧~~呵呵
IE的if條件Hack 自己可以靈活使用參看這篇IE條件註釋
Only IE
所有的IE可識別
只有IE5.0可以識別
Only IE 5.0+
IE5.0包換IE5.5都可以識別
僅IE6可識別
Only IE 7/-
IE6以及IE6以下的IE5.x都可識別
Only IE 7/-
僅IE7可識別
然後CSS這樣設計:
#container{
min-width: 600px;
width:e¬xpression(document.body.clientWidth < 600? 「600px」: 「auto」 );
}
第一個min-width是正常的;但第2行的width使用了Javascript,這只有IE才認得,這也會讓你的HTML文檔不太正規。它實際上通過Javascript的判斷來實現最小寬度。
7 清除浮動
.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代碼
9 屬性選擇器(這個不能算是兼容,是隱藏css的一個bug)
p[id]{}div[id]{}
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對像中的內容
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瀏覽器(也就是IE下不顯示)
*:lang(zh) select {font:12px !important;} /*FF,OP可見*/
select:empty {font:12px !important;} /*safari可見*/
這裡select是選擇符,根據情況更換。第二句是MAC上safari瀏覽器獨有的。
僅IE7識別
*+html {…}
當面臨需要只針對IE7做樣式的時候就可以採用這個HACK。
IE6及IE6以下識別
* html {…}
這個地方要特別注意很多地主都寫了是IE6的HACK其實IE5.x同樣可以識別這個HACK。其它瀏覽器不識別。
html/**/ >body select {……}
這句與上一句的作用相同。
僅IE6不識別
select { display /*IE6不识别*/:none;}
這裡主要是通過CSS註釋分開一個屬性與值,流釋在冒號前。
僅IE6與IE5不識別
select/**/ { display /*IE6,IE5不识别*/:none;}
這裡與上面一句不同的是在選擇符與花括號之間多了一個CSS註釋。
僅IE5不識別
select/*IE5不識別*/ { display:none;}
這一句是在上一句中去掉了屬性區的註釋。只有IE5不識別
盒模型解決方法
selct {width:IE5.x宽度; voice-family :""}""; voice-family:inherit; width:正确宽度;}
盒模型的清除方法不是通過!important來處理的。這點要明確。
清除浮動
select:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
在Firefox中,當子級都為浮動時,那麼父級的高度就無法完全的包住整個子級,那麼這時用這個清除浮動的HACK來對父級做一次定義,那麼就可以解決這個問題 。
截字省略號
select { -o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; }
這個是在越出長度後會自行的截掉多出部分的文字,並以省略號結尾,很好的一個技術。只是目前Firefox並不支持。
只有Opera識別
@media all and (min-width: 0px){ select {……} }
針對Opera瀏覽器做單獨的設定。
以 上都是寫CSS中的一些HACK,建議遵循正確的標籤嵌套(div ul li 嵌套結構關係),這樣可以減少你使用Hack的頻率,不要進入理解誤區,並不是一個頁面就需要很多的hack來保持多瀏覽器兼容),很多情況下也許一個 Hack都不用也可以讓瀏覽器工作得非常好,這些都是用來解決局部的兼容性問題,如果希望把兼容性的內容也分離出來,不妨試一下下面的幾種過濾器。這些過 濾器有的是寫在CSS中通過過濾器導入特別的樣式,也有的是寫在HTML中的通過條件來鏈接或是導入需要的補丁樣式。
IE5.x的過濾器,只有IE5.x可見
@media tty {
i{content:"";/*" "*/}} @import 'ie5win.css'; /*";}
}/* */
IE5/MAC的過濾器,一般用不著
/**//*/
@import "ie5mac.css";
/**/
下 面是IE的條件註釋,個人覺得用條件註釋調用相應 Hack是比較完美的多瀏覽器兼容的解決辦法。把需要hack的地方單獨放到一個文件裡面,當瀏覽器版本符合的時候就可以調用那個被Hack的樣式,這樣 不僅使用起來非常方便,而且對於製作這個CSS本身來講,可以更嚴格的觀察到是否有必要使用hack,很多情況下,當我本人寫CSS如果把全部代碼包括 Hack都寫到一個CSS文件的時候的時候會很隨意,想怎麼Hack就怎麼Hack,而你獨立出來寫的時候,你就會不自覺的考慮是否有必要Hack,是先 Hack CSS?還是先把主CSS裡面的東西調整到盡可能的不需要Hack?當你僅用很少的Hack就讓很多瀏覽器很乖很聽話的時候,你是不是很有成就感呢?你知 道怎麼選擇了吧~~呵呵
IE的if條件Hack 自己可以靈活使用參看這篇IE條件註釋
Only IE
所有的IE可識別
只有IE5.0可以識別
Only IE 5.0+
IE5.0包換IE5.5都可以識別
僅IE6可識別
Only IE 7/-
IE6以及IE6以下的IE5.x都可識別
Only IE 7/-
僅IE7可識別
IE6、IE7、FF 與兼容性有關的特性
CSS HACK
代碼:
所有瀏覽器 通用
height: 100px;
IE6 專用
_height: 100px;powered by 25175.net
IE6 專用
*height: 100px;
IE7 專用
*+height: 100px;
IE7、FF 共用
height: 100px !important(優先級);
一、CSS HACK
以下兩種方法幾乎能解決現今所有HACK.
1, !important (不是很推薦,用下面的一種感覺最安全)
隨著IE7對!important的支持, !important 方法現在只針對IE6的HACK.(注意寫法.記得該聲明位置需要提前.)
代碼:
2, IE6/IE77對FireFox
*+html 與 *html 是IE特有的標籤, firefox 暫不支持.而*+html 又為 IE7特有標籤.
代碼:
注意:
*+html 對IE7的HACK 必須保證HTML頂部有如下聲明:
代碼:
http://www.w3.org/TR/html4/loose.dtd">
二、萬能 float 閉合(非常重要!) 可以用這個解決多個div對齊時的間距不對,
關於 clear float 的原理可參見 [How To Clear Floats Without Structural Markup]
將以下代碼加入Global CSS 中,給需要閉合的div加上 class=」clearfix」 即可,屢試不爽.
代碼:
三、其他兼容技巧(相當有用)
1, FF下給 div 設置 padding 後會導致 width 和 height 增加, 但IE不會.(可用!important解決)
2, 居中問題.
1).垂直居中.將 line-height 設置為 當前 div 相同的高度, 再通過 vertical-align: middle.( 注意內容不要換行.)
2).水平居中. margin: 0 auto;(當然不是萬能)
3, 若需給 a 標籤內內容加上 樣式, 需要設置 display: block;(常見於導航標籤)
4, FF 和 IE 對 BOX 理解的差異導致相差 2px 的還有設為 float的div在ie下 margin加倍等問題.
5, ul 標籤在 FF 下面默認有 list-style 和 padding . 最好事先聲明, 以避免不必要的麻煩. (常見於導航標籤和內容列表)
6, 作為外部 wrapper 的 div 不要定死高度, 最好還加上 overflow: hidden.以達到高度自適應.
7, 關於手形光標. cursor: pointer. 而hand 只適用於 IE.貼上代碼:
兼容代碼:hack最推薦的模式。
/* FF */
.submitbutton {
float:left;
width: 40px;
height: 57px;
margin-top: 24px;
margin-right: 12px;
}
/* IE6 */
*html .submitbutton {
margin-top: 21px;
}
/* IE7 */
*+html .submitbutton {
margin-top: 21px;
}
什 麼是瀏覽器HACK:當我們使用不同的瀏覽器(Firefox IE7 IE6)訪問同一個網站,或者頁面的時候,會出現一些不兼容的問題,有的顯示出來正常,有的顯示出來不正常,我們在編寫CSS的時候會很惱火,剛修復了這 個瀏覽器的問題,結果另外一個瀏覽器卻出了新問題。而HACK就是一種辦法,能讓你在一個CSS裡面獨立的寫支持不同瀏覽器的樣式。這下就和諧了。呵呵!
最 近微軟發佈的IE7瀏覽器的兼容性確實給一些網頁製作人員添加了一個沉重的負擔,雖然IE7已經走向標準化,但還是有許多和FF不同的地方,所以需要用到 IE7的HACK,有許多朋友問過IE7的HACK是什麼,其實我也不知道。暫時還沒找到IE7專用的HACK。除了前面那片文章,《針對firefox ie6 ie7的css樣式》中的hack方式也是很好用的。
有一點邏輯思想的人都會知道可以用IE和FF的HACK結合起來使用,下面介紹三個HACK,例如:(適合新手,呵呵,高手就在這裡路過吧。)
程序代碼
第一個HACK,IE FF 所有瀏覽器 公用(其實也不算是HACK)
height:100px;
第二個HACK IE6專用
_height:100px;
第三個HACK IE6 IE7公用
*height:100px;
介紹完了這三個HACK了,下面我們再來看看如何在一個樣式裡分別給一個屬性定義IE6 IE7 FF專用的HACK,看下面的代碼,順序不能錯哦:
程序代碼
height:100px;
*height:120px;
_height:150px;
下面我簡單解釋一下各瀏覽器怎樣理解這三個屬性:
在FF下,第2、3個屬性FF不認識,所以它讀的是 height:100px;
在IE7下,第三個屬性IE7不認識,所以它讀第1、2個屬性,又因為第二個屬性覆蓋了第一個屬性,所以IE7最終讀出的是第2個屬性 *height:120px;
在IE6下,三個屬性IE6都認識,所以三個屬性都可以讀取,又因為第三個屬性覆蓋掉前2個屬性,所以IE6最終讀取的是第三個屬性。
1 針對firefox ie6 ie7的css樣式
現 在大部分都是用!important來hack,對於ie6和firefox測試可以正常顯示,但是ie7對!important可以正確解釋,會導致頁 面沒按要求顯示!找到一個針對IE7不錯的hack方式就是使用「*+html」,現在用IE7瀏覽一下,應該沒有問題了現在寫一個CSS可以這樣:
#1 { color: #333; } /* Moz */
* html #1 { color: #666; } /* IE6 */
*+html #1 { color: #999; } /* IE7 */
那麼在firefox下字體顏色顯示為#333,IE6下字體顏色顯示為#666,IE7下字體顏色顯示為#999。
2 css佈局中的居中問題
主要的樣式定義如下:
body {TEXT-ALIGN: center;}
#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }
說明:
首先在父級元素定義TEXT-ALIGN: center;這個的意思就是在父級元素內的內容居中;對於IE這樣設定就已經可以了。
但在mozilla中不能居中。解決辦法就是在子元素定義時候設定時再加上「MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 」
需要說明的是,如果你想用這個方法使整個頁面要居中,建議不要套在一個DIV裡,你可以依次拆出多個div,只要在每個拆出的div裡定義MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 就可以了。
3 盒模型不同解釋.
#box{
width:600px;
//for ie6.0- w\idth:500px;
//for ff+ie6.0
}
#box{
width:600px!important
//for ff
width:600px;
//for ff+ie6.0
width /**/:500px;
//for ie6.0-
}
4 浮動ie產生的雙倍距離
#box{ float:left; width:100px; margin:0 0 0 100px; //这种情况之下IE会产生200px的距离 display:inline; //使浮动忽略}
這裡細說一下block,inline兩個元素,Block元素的特點是:總是在新行上開始,高度,寬度,行高,邊距都可以控制(塊元素);Inline元素的特點是:和其他元素在同一行上,…不可控制(內嵌元素);
#box{ display:block; //可以為內嵌元素模擬為塊元素 display:inline; //實現同一行排列的的效果 diplay:table;
5 IE與寬度和高度的問題
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;}
6 頁面的最小寬度
min- width是個非常方便的CSS命令,它可以指定元素最小也不能小於某個寬度,這樣就能保證排版一直正確。但IE不認得這個,而它實際上把 width當做最小寬度來使。為了讓這一命令在IE上也能用,可以把一個
CSS HACK
代碼:
所有瀏覽器 通用
height: 100px;
IE6 專用
_height: 100px;powered by 25175.net
IE6 專用
*height: 100px;
IE7 專用
*+height: 100px;
IE7、FF 共用
height: 100px !important(優先級);
一、CSS HACK
以下兩種方法幾乎能解決現今所有HACK.
1, !important (不是很推薦,用下面的一種感覺最安全)
隨著IE7對!important的支持, !important 方法現在只針對IE6的HACK.(注意寫法.記得該聲明位置需要提前.)
代碼:
2, IE6/IE77對FireFox
*+html 與 *html 是IE特有的標籤, firefox 暫不支持.而*+html 又為 IE7特有標籤.
代碼:
注意:
*+html 對IE7的HACK 必須保證HTML頂部有如下聲明:
代碼:
http://www.w3.org/TR/html4/loose.dtd">
二、萬能 float 閉合(非常重要!) 可以用這個解決多個div對齊時的間距不對,
關於 clear float 的原理可參見 [How To Clear Floats Without Structural Markup]
將以下代碼加入Global CSS 中,給需要閉合的div加上 class=」clearfix」 即可,屢試不爽.
代碼:
三、其他兼容技巧(相當有用)
1, FF下給 div 設置 padding 後會導致 width 和 height 增加, 但IE不會.(可用!important解決)
2, 居中問題.
1).垂直居中.將 line-height 設置為 當前 div 相同的高度, 再通過 vertical-align: middle.( 注意內容不要換行.)
2).水平居中. margin: 0 auto;(當然不是萬能)
3, 若需給 a 標籤內內容加上 樣式, 需要設置 display: block;(常見於導航標籤)
4, FF 和 IE 對 BOX 理解的差異導致相差 2px 的還有設為 float的div在ie下 margin加倍等問題.
5, ul 標籤在 FF 下面默認有 list-style 和 padding . 最好事先聲明, 以避免不必要的麻煩. (常見於導航標籤和內容列表)
6, 作為外部 wrapper 的 div 不要定死高度, 最好還加上 overflow: hidden.以達到高度自適應.
7, 關於手形光標. cursor: pointer. 而hand 只適用於 IE.貼上代碼:
兼容代碼:hack最推薦的模式。
/* FF */
.submitbutton {
float:left;
width: 40px;
height: 57px;
margin-top: 24px;
margin-right: 12px;
}
/* IE6 */
*html .submitbutton {
margin-top: 21px;
}
/* IE7 */
*+html .submitbutton {
margin-top: 21px;
}
什 麼是瀏覽器HACK:當我們使用不同的瀏覽器(Firefox IE7 IE6)訪問同一個網站,或者頁面的時候,會出現一些不兼容的問題,有的顯示出來正常,有的顯示出來不正常,我們在編寫CSS的時候會很惱火,剛修復了這 個瀏覽器的問題,結果另外一個瀏覽器卻出了新問題。而HACK就是一種辦法,能讓你在一個CSS裡面獨立的寫支持不同瀏覽器的樣式。這下就和諧了。呵呵!
最 近微軟發佈的IE7瀏覽器的兼容性確實給一些網頁製作人員添加了一個沉重的負擔,雖然IE7已經走向標準化,但還是有許多和FF不同的地方,所以需要用到 IE7的HACK,有許多朋友問過IE7的HACK是什麼,其實我也不知道。暫時還沒找到IE7專用的HACK。除了前面那片文章,《針對firefox ie6 ie7的css樣式》中的hack方式也是很好用的。
有一點邏輯思想的人都會知道可以用IE和FF的HACK結合起來使用,下面介紹三個HACK,例如:(適合新手,呵呵,高手就在這裡路過吧。)
程序代碼
第一個HACK,IE FF 所有瀏覽器 公用(其實也不算是HACK)
height:100px;
第二個HACK IE6專用
_height:100px;
第三個HACK IE6 IE7公用
*height:100px;
介紹完了這三個HACK了,下面我們再來看看如何在一個樣式裡分別給一個屬性定義IE6 IE7 FF專用的HACK,看下面的代碼,順序不能錯哦:
程序代碼
height:100px;
*height:120px;
_height:150px;
下面我簡單解釋一下各瀏覽器怎樣理解這三個屬性:
在FF下,第2、3個屬性FF不認識,所以它讀的是 height:100px;
在IE7下,第三個屬性IE7不認識,所以它讀第1、2個屬性,又因為第二個屬性覆蓋了第一個屬性,所以IE7最終讀出的是第2個屬性 *height:120px;
在IE6下,三個屬性IE6都認識,所以三個屬性都可以讀取,又因為第三個屬性覆蓋掉前2個屬性,所以IE6最終讀取的是第三個屬性。
1 針對firefox ie6 ie7的css樣式
現 在大部分都是用!important來hack,對於ie6和firefox測試可以正常顯示,但是ie7對!important可以正確解釋,會導致頁 面沒按要求顯示!找到一個針對IE7不錯的hack方式就是使用「*+html」,現在用IE7瀏覽一下,應該沒有問題了現在寫一個CSS可以這樣:
#1 { color: #333; } /* Moz */
* html #1 { color: #666; } /* IE6 */
*+html #1 { color: #999; } /* IE7 */
那麼在firefox下字體顏色顯示為#333,IE6下字體顏色顯示為#666,IE7下字體顏色顯示為#999。
2 css佈局中的居中問題
主要的樣式定義如下:
body {TEXT-ALIGN: center;}
#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }
說明:
首先在父級元素定義TEXT-ALIGN: center;這個的意思就是在父級元素內的內容居中;對於IE這樣設定就已經可以了。
但在mozilla中不能居中。解決辦法就是在子元素定義時候設定時再加上「MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 」
需要說明的是,如果你想用這個方法使整個頁面要居中,建議不要套在一個DIV裡,你可以依次拆出多個div,只要在每個拆出的div裡定義MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 就可以了。
3 盒模型不同解釋.
#box{
width:600px;
//for ie6.0- w\idth:500px;
//for ff+ie6.0
}
#box{
width:600px!important
//for ff
width:600px;
//for ff+ie6.0
width /**/:500px;
//for ie6.0-
}
4 浮動ie產生的雙倍距離
#box{ float:left; width:100px; margin:0 0 0 100px; //这种情况之下IE会产生200px的距离 display:inline; //使浮动忽略}
這裡細說一下block,inline兩個元素,Block元素的特點是:總是在新行上開始,高度,寬度,行高,邊距都可以控制(塊元素);Inline元素的特點是:和其他元素在同一行上,…不可控制(內嵌元素);
#box{ display:block; //可以為內嵌元素模擬為塊元素 display:inline; //實現同一行排列的的效果 diplay:table;
5 IE與寬度和高度的問題
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;}
6 頁面的最小寬度
min- width是個非常方便的CSS命令,它可以指定元素最小也不能小於某個寬度,這樣就能保證排版一直正確。但IE不認得這個,而它實際上把 width當做最小寬度來使。為了讓這一命令在IE上也能用,可以把一個
放到 標籤下,然後為div指定一個類:
然後CSS這樣設計:
#container{
min-width: 600px;
width:e¬xpression(document.body.clientWidth < 600? 「600px」: 「auto」 );
}
第一個min-width是正常的;但第2行的width使用了Javascript,這只有IE才認得,這也會讓你的HTML文檔不太正規。它實際上通過Javascript的判斷來實現最小寬度。
7 清除浮動
.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代碼
9 屬性選擇器(這個不能算是兼容,是隱藏css的一個bug)
p[id]{}div[id]{}
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 時。例:
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瀏覽器(也就是IE下不顯示)
*:lang(zh) select {font:12px !important;} /*FF,OP可見*/
select:empty {font:12px !important;} /*safari可見*/
這裡select是選擇符,根據情況更換。第二句是MAC上safari瀏覽器獨有的。
僅IE7識別
*+html {…}
當面臨需要只針對IE7做樣式的時候就可以採用這個HACK。
IE6及IE6以下識別
* html {…}
這個地方要特別注意很多地主都寫了是IE6的HACK其實IE5.x同樣可以識別這個HACK。其它瀏覽器不識別。
html/**/ >body select {……}
這句與上一句的作用相同。
僅IE6不識別
select { display /*IE6不识别*/:none;}
這裡主要是通過CSS註釋分開一個屬性與值,流釋在冒號前。
僅IE6與IE5不識別
select/**/ { display /*IE6,IE5不识别*/:none;}
這裡與上面一句不同的是在選擇符與花括號之間多了一個CSS註釋。
僅IE5不識別
select/*IE5不識別*/ { display:none;}
這一句是在上一句中去掉了屬性區的註釋。只有IE5不識別
盒模型解決方法
selct {width:IE5.x宽度; voice-family :""}""; voice-family:inherit; width:正确宽度;}
盒模型的清除方法不是通過!important來處理的。這點要明確。
清除浮動
select:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
在Firefox中,當子級都為浮動時,那麼父級的高度就無法完全的包住整個子級,那麼這時用這個清除浮動的HACK來對父級做一次定義,那麼就可以解決這個問題 。
截字省略號
select { -o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; }
這個是在越出長度後會自行的截掉多出部分的文字,並以省略號結尾,很好的一個技術。只是目前Firefox並不支持。
只有Opera識別
@media all and (min-width: 0px){ select {……} }
針對Opera瀏覽器做單獨的設定。
以 上都是寫CSS中的一些HACK,建議遵循正確的標籤嵌套(div ul li 嵌套結構關係),這樣可以減少你使用Hack的頻率,不要進入理解誤區,並不是一個頁面就需要很多的hack來保持多瀏覽器兼容),很多情況下也許一個 Hack都不用也可以讓瀏覽器工作得非常好,這些都是用來解決局部的兼容性問題,如果希望把兼容性的內容也分離出來,不妨試一下下面的幾種過濾器。這些過 濾器有的是寫在CSS中通過過濾器導入特別的樣式,也有的是寫在HTML中的通過條件來鏈接或是導入需要的補丁樣式。
IE5.x的過濾器,只有IE5.x可見
@media tty {
i{content:"";/*" "*/}} @import 'ie5win.css'; /*";}
}/* */
IE5/MAC的過濾器,一般用不著
/**//*/
@import "ie5mac.css";
/**/
下 面是IE的條件註釋,個人覺得用條件註釋調用相應 Hack是比較完美的多瀏覽器兼容的解決辦法。把需要hack的地方單獨放到一個文件裡面,當瀏覽器版本符合的時候就可以調用那個被Hack的樣式,這樣 不僅使用起來非常方便,而且對於製作這個CSS本身來講,可以更嚴格的觀察到是否有必要使用hack,很多情況下,當我本人寫CSS如果把全部代碼包括 Hack都寫到一個CSS文件的時候的時候會很隨意,想怎麼Hack就怎麼Hack,而你獨立出來寫的時候,你就會不自覺的考慮是否有必要Hack,是先 Hack CSS?還是先把主CSS裡面的東西調整到盡可能的不需要Hack?當你僅用很少的Hack就讓很多瀏覽器很乖很聽話的時候,你是不是很有成就感呢?你知 道怎麼選擇了吧~~呵呵
IE的if條件Hack 自己可以靈活使用參看這篇IE條件註釋
Only IE
所有的IE可識別
只有IE5.0可以識別
Only IE 5.0+
IE5.0包換IE5.5都可以識別
僅IE6可識別
Only IE 7/-
IE6以及IE6以下的IE5.x都可識別
Only IE 7/-
僅IE7可識別
Css 當中有許多的東西不不按照某些規律來的話,會讓你很心煩,雖然你可以通過很多的hack,很多的!important 來控制它,但是你會發現長此以往你會很不甘心,看看許多優秀的網站,他們的CSS讓IE6,Ie7,Firefox,甚至Safari,Opera運行起 來完美無缺是不是很羨慕?而他們看似複雜的模版下面使用的Hack 少得可憐。其實你要知道IE 和 Firefox 並不不是那麼的不和諧,我們找到一定的方法,是完全可以讓他們和諧共處的。不要你認為發現了hack的辦法,你就掌握了一切,我們並不是Hack的奴隸。
div ul li 的嵌套順序
今 天只講一個規則。就是
然後CSS這樣設計:
#container{
min-width: 600px;
width:e¬xpression(document.body.clientWidth < 600? 「600px」: 「auto」 );
}
第一個min-width是正常的;但第2行的width使用了Javascript,這只有IE才認得,這也會讓你的HTML文檔不太正規。它實際上通過Javascript的判斷來實現最小寬度。
7 清除浮動
.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代碼
9 屬性選擇器(這個不能算是兼容,是隱藏css的一個bug)
p[id]{}div[id]{}
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對像中的內容
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瀏覽器(也就是IE下不顯示)
*:lang(zh) select {font:12px !important;} /*FF,OP可見*/
select:empty {font:12px !important;} /*safari可見*/
這裡select是選擇符,根據情況更換。第二句是MAC上safari瀏覽器獨有的。
僅IE7識別
*+html {…}
當面臨需要只針對IE7做樣式的時候就可以採用這個HACK。
IE6及IE6以下識別
* html {…}
這個地方要特別注意很多地主都寫了是IE6的HACK其實IE5.x同樣可以識別這個HACK。其它瀏覽器不識別。
html/**/ >body select {……}
這句與上一句的作用相同。
僅IE6不識別
select { display /*IE6不识别*/:none;}
這裡主要是通過CSS註釋分開一個屬性與值,流釋在冒號前。
僅IE6與IE5不識別
select/**/ { display /*IE6,IE5不识别*/:none;}
這裡與上面一句不同的是在選擇符與花括號之間多了一個CSS註釋。
僅IE5不識別
select/*IE5不識別*/ { display:none;}
這一句是在上一句中去掉了屬性區的註釋。只有IE5不識別
盒模型解決方法
selct {width:IE5.x宽度; voice-family :""}""; voice-family:inherit; width:正确宽度;}
盒模型的清除方法不是通過!important來處理的。這點要明確。
清除浮動
select:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
在Firefox中,當子級都為浮動時,那麼父級的高度就無法完全的包住整個子級,那麼這時用這個清除浮動的HACK來對父級做一次定義,那麼就可以解決這個問題 。
截字省略號
select { -o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; }
這個是在越出長度後會自行的截掉多出部分的文字,並以省略號結尾,很好的一個技術。只是目前Firefox並不支持。
只有Opera識別
@media all and (min-width: 0px){ select {……} }
針對Opera瀏覽器做單獨的設定。
以 上都是寫CSS中的一些HACK,建議遵循正確的標籤嵌套(div ul li 嵌套結構關係),這樣可以減少你使用Hack的頻率,不要進入理解誤區,並不是一個頁面就需要很多的hack來保持多瀏覽器兼容),很多情況下也許一個 Hack都不用也可以讓瀏覽器工作得非常好,這些都是用來解決局部的兼容性問題,如果希望把兼容性的內容也分離出來,不妨試一下下面的幾種過濾器。這些過 濾器有的是寫在CSS中通過過濾器導入特別的樣式,也有的是寫在HTML中的通過條件來鏈接或是導入需要的補丁樣式。
IE5.x的過濾器,只有IE5.x可見
@media tty {
i{content:"";/*" "*/}} @import 'ie5win.css'; /*";}
}/* */
IE5/MAC的過濾器,一般用不著
/**//*/
@import "ie5mac.css";
/**/
下 面是IE的條件註釋,個人覺得用條件註釋調用相應 Hack是比較完美的多瀏覽器兼容的解決辦法。把需要hack的地方單獨放到一個文件裡面,當瀏覽器版本符合的時候就可以調用那個被Hack的樣式,這樣 不僅使用起來非常方便,而且對於製作這個CSS本身來講,可以更嚴格的觀察到是否有必要使用hack,很多情況下,當我本人寫CSS如果把全部代碼包括 Hack都寫到一個CSS文件的時候的時候會很隨意,想怎麼Hack就怎麼Hack,而你獨立出來寫的時候,你就會不自覺的考慮是否有必要Hack,是先 Hack CSS?還是先把主CSS裡面的東西調整到盡可能的不需要Hack?當你僅用很少的Hack就讓很多瀏覽器很乖很聽話的時候,你是不是很有成就感呢?你知 道怎麼選擇了吧~~呵呵
IE的if條件Hack 自己可以靈活使用參看這篇IE條件註釋
Only IE
所有的IE可識別
只有IE5.0可以識別
Only IE 5.0+
IE5.0包換IE5.5都可以識別
僅IE6可識別
Only IE 7/-
IE6以及IE6以下的IE5.x都可識別
Only IE 7/-
僅IE7可識別
Css 當中有許多的東西不不按照某些規律來的話,會讓你很心煩,雖然你可以通過很多的hack,很多的!important 來控制它,但是你會發現長此以往你會很不甘心,看看許多優秀的網站,他們的CSS讓IE6,Ie7,Firefox,甚至Safari,Opera運行起 來完美無缺是不是很羨慕?而他們看似複雜的模版下面使用的Hack 少得可憐。其實你要知道IE 和 Firefox 並不不是那麼的不和諧,我們找到一定的方法,是完全可以讓他們和諧共處的。不要你認為發現了hack的辦法,你就掌握了一切,我們並不是Hack的奴隸。
div ul li 的嵌套順序
今 天只講一個規則。就是
- 的三角關係。我的經驗就是在最外面,裡面 是
- ,然後再是
- ,當然
- 裡面又可以嵌套什麼的,但是並不建議你嵌套很多 東西。當你符合這樣的規則的時候,那些倒霉的,不聽話的間隙就不會在裡面出現了,當你僅僅是裡面放
- ,而不 用
- 的時候,你會發現你的間隙十分難控制,一般情況下,IE6和IE7會憑空多一些間距。但很多情況你來到下一行,間隙就沒了,但是前 面的內容又空了很大一塊,出現這種情況雖然你可以改變IE的Margin,然後調整Firefox下面的Padding,以便使得兩者顯示起來得效果很相 似,但是你得CSS將變得臭長無比,你不得不多考慮更多可能出現這種問題補救措施,雖然你知道千篇一律來Hack它們,但是你會煩得要命。
- 標記的最前方顯示圓點或者數字等目錄類型的標記,因為IE和Firefox顯示出來默認效果有些不一樣。因此這樣不需要做任何手腳,你的IE6、和 IE7、Firefox顯示出來的東西(外距,間距,高度,寬度)就幾乎沒什麼區別了,也許細心的你會在某一個時刻發現一、兩個象素的差別,但那已經很完 美了,不需要你通過調整大片的CSS來控制它們的顯示了,你願意,你可以僅僅hack一兩個地方,而且通常這種hack可以適應各種地方,不需要你重複在 不同的地方調試不同的Hack方式–減輕你的煩惱。你可以ul.class1, ul.class2, ul.class3 {xxx:xxxx}的方式方便的整理出你要hack的地方,而統一Hack。嘗試一下吧,再也不要亂嵌套了,雖然在Div+CSS的方式下你幾乎可以想 怎麼嵌套就怎麼嵌套,但是按照上面的規律你將輕鬆很多,從而事半功倍!
具體嵌套寫法
遵 循上面得嵌套方式, - ,而不 用
相關文章
最新文章
原創、翻譯及轉貼的資訊都在這裡。
作品
作品:港聯 瓦斯鋼瓶管理系統 及 App
10 十月 2024
網站架設 作品:幸福優勢學院 × 蓋洛普 - 開啟領導新視野
10 九月 2024
網站架設 作品:萊斯聲學智能-聲學之巔,靜享世界
07 九月 2024
網頁設計 網站建置 | 鉅立資訊 - 網路資安的領航者
31 七月 2024
網頁設計 作品:科米企業-專業工程設計解決方案
05 五月 2024
B2B 詢價 多國語系 網頁設計:倍疆科技 | 流體控制與真空技術的專家
29 十二月 2023
2023國立陽明交通大學附設醫院網站及 APP - 網路掛號系統
28 十二月 2023
網站升級:晶華傢俱 | 居家輕奢華美學先驅
07 十二月 2023
網站升級:教育部體育署 | 全國各級學校 運動人才 資料庫 入口網站
13 十月 2023
作品:鳳山體育足球學院 網站建置 場地租借系統 開發
10 十月 2023
程式設計開發
程式設計 詢價清單:程式修改工作日誌
12 七月 2024
軟體開發 - 政府補助計畫:合作策略與風險管理
26 四月 2024
軟體開發 : 程式設計 四階段工作流程 - 專業網站
22 二月 2024
程式設計 介面設計: 兒童健康管理系統 - 學校首選.天使守護
21 二月 2024
CRM 客戶關係管理系統:潛在客戶成交自動化,節省成本增進效率
20 二月 2024
客製化各種活動/課程報名網站 預約 線上報名系統 網頁設計 教學 報價
18 十二月 2023
網站建置 :全後台模組化 網站功能 介紹
09 十月 2023
E-BOOKING 場地 租借 空間 預約 系統 - 介紹
05 九月 2023
網站資訊安全 政策及管理
16 三月 2023
響應式設計為什麼要錢?
08 三月 2019
電子商務
電商 行銷工具:9大實用技巧提升業績
21 七月 2024
電商 網站優化 策略 :提升 SEO 流量與提高轉化率
05 七月 2024
電商 SEO 社群行銷: 9大流量密碼
24 六月 2024
電商 網頁設計:掌握 購物網站 成功關鍵的九大元素
19 四月 2024
電商 GMC: 購物網站 必備!精準曝光、提升銷量!
08 四月 2024
SEO:電子商務 內容行銷 帶來 曝光率增加6倍,點擊率增加19倍
01 四月 2024
j2store 電子商務 教學6:全方位 購物網站 操作與行銷技巧解析
23 三月 2024
SEO 從零開始:打造月營業額100萬的 電商 網站策略大揭秘
18 三月 2024
揭開VPN的奧秘,保障您的電子商務安全!
23 二月 2024
SEO優化
WordPress SEO:10 大設定,快速提升搜尋排名
11 十一月 2024
如何利用AI技術提升SEO
17 十月 2024
SEO 網站排名 第一頁 - 成功案例及報價 陸續增加中
02 九月 2024
SEO 網站優化:PageSpeed Insights 提升網站效能
03 八月 2024
關鍵字 SEO 優化步驟:提升網站可見度
30 七月 2024
電商 網站優化 策略 :提升 SEO 流量與提高轉化率
05 七月 2024
電商 SEO 社群行銷: 9大流量密碼
24 六月 2024
SEO:植入 SEO 概念的網站與優化步驟
15 六月 2024
SEO:電子商務 內容行銷 帶來 曝光率增加6倍,點擊率增加19倍
01 四月 2024
SEO 從零開始:打造月營業額100萬的 電商 網站策略大揭秘
18 三月 2024
數位新知
AI 如何幫助我進行網頁設計:可能性與實用案例
14 八月 2024
軟體開發 - 政府補助計畫:合作策略與風險管理
26 四月 2024
B2B 企業網站 建置教學 :全方位 產品目錄 、 詢價清單 與 網頁設計 說明
02 一月 2024
5個 AI 外掛推薦:AI X Joomla,打造 SEO 網站 自動化內容!
23 十一月 2023
【如何使用全球熱門的 ChatGPT 提升行銷業績?】
15 十二月 2022
2022駭客攻擊網站(CMS)以針對市占高達6成的WordPress最多
12 十一月 2022
MAIL SEVER IP被設為黑名單-分享
31 三月 2017
Sucuri:去年Q3被駭的CMS網站高達7成4為WordPress,6成還在用舊系統
11 一月 2017
為了支持HTML5 ,谷歌Chrome 瀏覽器將“封殺”Flash
12 八月 2016
大量擴散勒索軟體的兇手 ~ 台灣雅虎奇摩的 Flash 廣告
21 七月 2016
Joomla!教學
網頁設計:無痛升級 Joomla5,必備新功能全解析
25 十一月 2024
網站後台系統:全功能、簡單易用的理想選擇
08 六月 2024
B2B 網站管理 - 多國語系、產品展示、詢價清單 全方位教學
28 五月 2024
網頁設計 頁面編輯器 Page Builder :無需寫程式碼:輕鬆上手教學
12 五月 2024
j2store 電子商務 教學6:全方位 購物網站 操作與行銷技巧解析
23 三月 2024
B2B 企業網站 建置教學 :全方位 產品目錄 、 詢價清單 與 網頁設計 說明
02 一月 2024
客製化各種活動/課程報名網站 預約 線上報名系統 網頁設計 教學 報價
18 十二月 2023
5個 AI 外掛推薦:AI X Joomla,打造 SEO 網站 自動化內容!
23 十一月 2023
多國語系 網站 無痛建立!全球化 網站建置 !
07 十一月 2023
網站建置 :全後台模組化 網站功能 介紹
09 十月 2023
WORDPRESS教學
WordPress SEO:10 大設定,快速提升搜尋排名
11 十一月 2024
WordPress 網頁設計 熱門的付費與 免費佈景主題推薦
23 九月 2024
網站架設 WordPress:網站優化 從一般設定到媒體管理
14 九月 2024
網頁設計 教學:打造完美的 JOOMLA 和 WORDPRESS 網站
04 九月 2023
GA4、GTM與 WordPress joomla:電子商務營利追蹤設定教學
09 六月 2023
wordpress佈景主題安裝
26 八月 2022
wordpress外掛安裝
24 七月 2022
wordpress安裝教學
23 七月 2022
WordPress Vs Joomla比較
01 七月 2016
社群媒體
LINE 官方帳號 行動官網 與 AI客服機器人 社群行銷
10 八月 2024
電商 SEO 社群行銷: 9大流量密碼
24 六月 2024
投放廣告:Google Ads 與 Facebook 精準比較分析
02 十二月 2023
網站必備教學:如何產生 Line 官方及個人網址
21 四月 2023
Facebook messenger 嵌入網站教學
31 十月 2022
社群行銷-5個心法,讓你在社群媒體發燒!
25 十一月 2016
社群小編方案及行銷專案 報價
23 九月 2016
Facebook推出新功能 幫助電商跨境業務
23 九月 2016
轉向粉絲經濟 電商不打價格戰
31 八月 2016
Facebook-廣告素材實戰攻略
09 五月 2016
網頁設計與技術
網頁設計:無痛升級 Joomla5,必備新功能全解析
25 十一月 2024
網站建置:使用 Gmail 在 網站 上發送郵件的簡單教學
25 十月 2024
WordPress 網頁設計 熱門的付費與 免費佈景主題推薦
23 九月 2024
網站架設 WordPress:網站優化 從一般設定到媒體管理
14 九月 2024
網頁設計 新時代:如何使用 AI 設計網頁 圖片與影片
08 九月 2024
網站架設 網頁設計:網站類型與成本費用說明
17 八月 2024
網站後台系統:全功能、簡單易用的理想選擇
08 六月 2024
B2B 網站管理 - 多國語系、產品展示、詢價清單 全方位教學
28 五月 2024
網頁設計 圖庫 侵權案例及12個知名圖庫分享
20 五月 2024
網頁設計 頁面編輯器 Page Builder :無需寫程式碼:輕鬆上手教學
12 五月 2024
數位行銷
電商 網站優化 策略 :提升 SEO 流量與提高轉化率
05 七月 2024
電商 網頁設計:掌握 購物網站 成功關鍵的九大元素
19 四月 2024
電商 GMC: 購物網站 必備!精準曝光、提升銷量!
08 四月 2024
OMO 時代:電商 購物網站 流量經營,啟動品牌成功之路
11 一月 2024
投放廣告:Google Ads 與 Facebook 精準比較分析
02 十二月 2023
GA4、GTM與 WordPress joomla:電子商務營利追蹤設定教學
09 六月 2023
GA4 教學 - Google Analytics 更新及遷移安裝(1)
03 五月 2023
GA4 教學 - Google Analytics 更新及遷移安裝(2)
03 五月 2023
一頁式商店的架構、設計細節、功能、必備條件,提升電商轉化率
01 四月 2023
網站是實現夢想的工具! 開始準備建置您的網站了嗎? 加Line好友
最新文章
網頁設計:無痛升級 Joomla5,必備新功能全解析
25 十一月 2024
WordPress SEO:10 大設定,快速提升搜尋排名
11 十一月 2024
wordpress 購物網站 網頁設計 - 商品描述對齊
28 十月 2024
WordPress 響應式 網頁設計 RWD:最佳化圖片尺寸
28 十月 2024