[轉載,存檔,備查]
由於瀏覽器之間存在相容性問題，在製作網 頁的時候，為了使頁面能在不同瀏覽器中顯示相對一致；所以總結了幾個瀏覽器之間的Hack和在瀏覽器安全色問題上的一些相關注意事項。現在瀏覽器基本需要相容IE6；IE7；IE8；FF。
第一節 CSS HACK 匯總速查一覽
瀏覽器 |
Hack(不支援的為紅色) |
IE6 |
“*” “_” “\9” “!important” |
IE7 |
“*“ “_” “\9” “!important” |
IE8 |
“*“ “_” “\9” “!important” |
FF |
“*” “_” “\9” “!important” |
比如:
.main{ background-color: #CC00FF; /*所有瀏覽器都會顯示為紫色*/---------ALL background-color: #FF0000\9; /*IE6、IE7、IE8會顯示紅色*/------------IE8 *background-color: #0066FF; /*IE6、IE7會變為藍色*/-------------------IE7 _background-color: #009933; /*IE6會變為綠色*/--------------------------IE6 background-color: #000000!important;}/*FF會變為黑色*/---------------------------FF |
第二節 常 見相容問題整理 2.1 DOCTYPE 影響 CSS 處理
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-transitional.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-strict.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-Frameset.dtd"> |
Transitional類型：是指一種過渡 類型，使用這種類型瀏覽器對XHTML的解析比較寬鬆，允許使用HTML4.01中的標籤，但必須符合XHTML的文法。這種是現在通用的方法，用Dreamweaver建立網頁時預設就是這種類型。
Strict類型：嚴格類型，使用時瀏覽器將相對嚴格，不 允許使用任何錶現形式的標識和屬性，如在元素中直接使用bgcolor背景色屬性等。
Frameset類型：架構頁類型，如果網頁使用了架構結構， 就有必要使用這樣的文檔聲明。
2.2 編碼差異導致IE6不能正常解析CSS檔案
網頁採用了 UTF-8 編碼格式，這本來沒有問題，問題是外部 CSS 檔案預設是 ANSI 編碼，並沒有儲存為 UTF-8 格式。可能你會發現在一般情況下這樣也是沒有問題的，然而當 CSS 檔案中包含有中文注釋時就可能不盡如人意了！估計是 IE6 版本以下的瀏覽器在解析這個 CSS 檔案時因為編碼問題而無法正確解析，所以才會發生 CSS 在 IE6 下不起作用的情況。IE6 的人還是不少。因此這個問題需要解決：
方法一：把 CSS、JS 和網頁檔案都統一儲存為 UTF-8 格式。
方法二：去掉 CSS、JS 中的中文注釋，或者改為英文。
上文為IE6因為編碼問題無法正確解析CSS檔案
2.3 FORM標籤在IE自動增加MARGIN邊距
這個標籤在IE中,將會自動margin一些邊距,而在FF中margin則是0,因此,如果想顯示一致,所以最好在CSS中指定margin和 padding,針對上面兩個問題,CSS中一般首先都使用這樣的樣式form{margin:0;padding:0;}
2.4 UL標籤
UL標籤在Mozilla中預設是有padding值的,而在IE中只有margin有值；
所以先定義 ul{margin:0;padding:0;}
2.4 MARGIN加倍的問題
置為float的div在IE下設定的margin會加倍。這是一個ie6都存在的bug。解決方案是在這個div裡面加上display:inline；例如：
<div id="imfloat"></div>相應的CSS為
#imfloat{
float:left;
margin:5px; /*IE下理解為10px*/
display:inline; /*IE下再理解為5px*/ }
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
