CSS書寫順序建議及CSS HACK(FF&IE相容)

//顯示內容
display
position
float
clear
cursor
…

//自身屬性
margin
padding
width
height

/*排版*/
vertical-align
white-space
text-decoration
text-align
…

/*文字*/
color
font
content

/*邊框背景
boder和background放在最後的原因是修改的頻率會較之前的頻繁，放在最後查看起來方便。*/
border
background
}

 

 

程式碼：

.class{
background-color:# FFFF00;/*所有瀏覽器*/
* background-color:#00FF00;/*IE*/
_ background-color:# 00FFFF;/*IE6*/
}

@media all and(min-width:0){
.class{
background-color:#FF00FF; /*Opera */
} }/*只有Opera識別*/

@media all and (min-width:0){
.class{
background-color:#FF00FF; /*Opera和Sa */
html* .class{
background-color:# 808080; /*Sa*/
}
}}

註：這裡所指代的 Safari 和 Opera 一般為最新版本。

2、僅 Firefox 3 和 IE7 識別的 Hack

selector, x:-moz-any-link, x:default {
/* Firefox 3   and IE7 rules here */
}

 

 

 

 

可簡單解決IE與FF之間的相容問題（保持FF,IE7,IE的順序），但這種方式貌似對載入有一定的影響 ！

Update2007-12-31 NND快被Opera個丫的折騰崩潰了:

.e {/*FF OP*/
background-color: #FF0000
}
html* .e{/*Sa IE7 OP*/
background-color:#FF00FF
}
*+html .e{
background-color:#000000;/*OP*/
*background-color:#0000FF;/*IE7*/
}
* html .e{/*IE6*/
background-color:#00FFFF
}

對於 IE8 beta1 可以嘗試下面的 Hack：

/*/ selector { … } /**/
此規則僅 IE8 beta1 識別，而其他 A-grade 瀏覽器都不識別

>>>------我想分頁！--這麼長的文章，在這裡來個分頁多好啊！哈哈-------<<<
Description:
IE支援自訂游標檔案cursor:url()
IE支援自訂捲軸顏色風格
IE6中的select有永遠處在最上的bug,而且css對select不起作用。

在form中，IE支援label，包括文字和圖片；但是firefox不支援圖片的label，
點擊圖片不能讓label for的radio或者checkbox產生效果。

IE和firefox都是支援onscroll事件的，但是firefox中textarea對此事件不支援。

CSS方面，IE中支援在CSS中嵌入expresion，而Firefox不支援
firefox支擇相鄰子選擇符“>”，而IE6不支援（IE7支援）

firefox 對display的inline-block不支援，而IE均支援。

>>>------我想分頁！--這麼長的文章，在這裡來個分頁多好啊！哈哈-------<<<

以下收藏自：puterjam's Blog
區別IE6與FF：
background:orange;*background:blue;

區別IE6與IE7：
background:green !important;background:blue;

區別IE7與FF：
background:orange; *background:green;

區別FF，IE7，IE6：
background:orange;*background:green !important;*background:blue;

註：IE都能識別*;標準瀏覽器(如FF)不能識別*；
IE6能識別*，但不能識別 !important,
IE7能識別*，也能識別!important;
FF不能識別*，但能識別!important;

IE6 IE7 FF
* √ √ ×
!important × √ √

--------------------------------------------------------------------------------
另外再補充一個，底線"_",
IE6支援底線，IE7和firefox均不支援底線。(推薦)

於是大家還可以這樣來區分IE6，IE7，firefox
: background:orange;*background:green;_background:blue;

註：不管是什麼方法，書寫的順序都是firefox的寫在前面，IE7的寫在中間，IE6的寫在最後面。

>>>------我想分頁！--這麼長的文章，在這裡來個分頁多好啊！哈哈-------<<<
這是國外摘來的一張CSS hack列表，顯示了各瀏覽器對css hack的支援程度，對製作相容網頁非常有協助。

>>>------我想分頁！--這麼長的文章，在這裡來個分頁多好啊！哈哈-------<<<

找了一些相關的CSS HACK後，總結的幾個方法。

IE7的hack
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瀏覽器（也就是IE下不顯示）
*:lang(zh) select {font:12px !important;}
select:empty {font:12px !important;}
這裡select是選擇符，根據情況更換。第二句是MAC上safari瀏覽器專屬的。

僅IE7識別
*+html {…}
當面臨需要只針對IE7做樣式的時候就可以採用這個HACK。

IE6及IE6以下識別
* html   {…}
這個地方要特別注意很多地主都寫了是IE6的HACK其實IE5.x同樣可以識別這個HACK。其它瀏覽器不識別。
html/**/ >body   select {……}
這句與上一句的作用相同。
用法：
*html #box{…}

僅IE6不識別
#box { display /*IE6不識別*/:none;}
這裡主要是通過CSS注釋分開一個屬性與值，流釋在冒號前。

僅IE6與IE5不識別
#box/**/ { 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瀏覽器做單獨的設定。

IE5.x的過濾器，只有IE5.x可見
@media tty {
i{content:”\”;}} @import ‘ie5win.css’;

IE5/MAC的過濾器，一般用不著
>>>------我想分頁！--這麼長的文章，在這裡來個分頁多好啊！哈哈-------<<<

IE與Firefox的CSS相容隨記

　　CSS對瀏覽器器的相容性具有很高的價值，通常情況下IE和Firefox存在很大的解析差異，這裡介紹一下相容要點。

常見相容問題：

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、關於高度的問題

如果是動態地新增內容，高度最好不要定義。瀏覽器可以自動調整，然而如果是靜態內容，高度最好定好。（似乎有時候不會自動往下撐開，不知道具體怎麼回事）