DIV CSS建站對瀏覽器兼容性和注意事項(xiàng)
你對DIV+CSS建站對瀏覽器兼容性和注意事項(xiàng)是否了解，這里和大家分享一下，一個頁面從制作的開始就決定了他要使用的瀏覽器解析css模式，瀏覽器模式的不同，就造成了各個瀏覽器對頁面顯示的差異。
DIV+CSS建站對瀏覽器兼容性和注意事項(xiàng)
使用DIV+CSS構(gòu)架好處不少，但也確實(shí)存在一些問題，現(xiàn)在讓網(wǎng)頁設(shè)計(jì)師最頭疼的事莫過于DIV+CSS對瀏覽器的兼容性了，可能你用慣了IE6，做出來的東西沒感覺到有多大異常，但是把同樣的東西放到IE7里去看的話，就會發(fā)現(xiàn)很多問題，如果放到火狐瀏覽器里去看，結(jié)果更不盡人意。
一個頁面從制作的開始就決定了他要使用的瀏覽器解析css模式，瀏覽器模式的不同，就造成了各個瀏覽器對頁面顯示的差異。瀏覽器解析css有兩種模式,quirksmode和strictmode,目前正在使用的瀏覽器這兩種模式都支持，在doctype聲明中,沒有使用DTD聲明或者使用HTML4以下（不包括HTML4）的DTD聲明時(shí)，基本所有的瀏覽器都是使用quirksmode呈現(xiàn)，其他的則使用strictmode解析。
這兩種模式最大的不同就是提現(xiàn)在對盒模式的解釋上。什么是盒模式？這是針對塊級元素說的，這里簡單說一下，說白了就是把塊級元素想像成一個裝東西的盒子，而margin,padding,border,width這些DIV+CSS屬性構(gòu)成了盒模式。而區(qū)別就是產(chǎn)生在width屬性上。
在strictmode中：
width是內(nèi)容寬度，也就是說,元素真正的寬度=margin-left+border-left-width+padding-left+width+padding-right+border-right-width+margin-right;
在quirksmode中：
width則是元素的實(shí)際寬度，內(nèi)容寬度=width-(margin-left+margin-right+padding-left+padding-right+border-left-width+border-right-width)
其他要注意的事項(xiàng)：
◆內(nèi)聯(lián)元素，例如<a>、<span>等，定義上下邊界不會影響到行高(line-height)，內(nèi)聯(lián)元素距離上一行元素的距離由行高決定，而不是填充或邊界。注2.內(nèi)聯(lián)元素(display:inline)內(nèi)聯(lián)元素不需要在新行內(nèi)顯示，而且也不強(qiáng)迫其后的元素?fù)Q行，如a、em、span等都為內(nèi)聯(lián)元素。內(nèi)聯(lián)元素可以為任何其他元素的子元素。
◆浮動元素(無論左或者右浮動)邊界不壓縮，且若浮動元素不聲明寬度，則其寬度趨向于0，即壓縮到其內(nèi)容能承受的最小寬度。
◆如果盒中沒有內(nèi)容，則即使定義了寬度和高度都為100%，實(shí)際上只占0%，因此不會被顯示，此點(diǎn)在采取層布局的時(shí)候需特別注意。
◆邊界值可為負(fù)，其顯示效果各瀏覽器可能不相同。
◆填充值不可為負(fù)。
◆邊框默認(rèn)的樣式(border-style)為不顯示(none)
下面來說說IE6，IE7及FF火狐瀏覽器的區(qū)別和兼容方法：
1.IE7與IE6相比,有多達(dá)200多處改進(jìn),但它們都是在StrictMode下實(shí)現(xiàn)的,即在頁首聲明DocType為XHTMLTransitional,XHTMLStrict等.而在QuirksMode下,IE7和IE6別無二致。所以為了更好的兼容，盡量聲明DocType，采用StrictMode進(jìn)行制作。
2.IE7支持Alpha通道的PNG圖片，但是這些Alpha通道圖片在IE6下還是不能正常顯示的，所以還是盡量使用透明GIF圖片。
3.IE7盒子模型改變了：盒子對于"overflow"使用了"visible"默認(rèn)值,所以對于子元素尺寸大于父元素尺寸時(shí),IE7會和Firefox一樣將子元素露出于父元素之外顯示,而不是像IE6那樣把父元素?fù)未罅税釉?把頁面設(shè)置成"overflow:visible"即可。
4.設(shè)置為float的div在IE下設(shè)置的margin會加倍。這是一個IE6存在的bug。解決方案是在這個div里面加上"display:inline"。
5.IE和火狐對'width'定義的不同：
Firefox中：容器占的寬度=內(nèi)容寬度+padding寬度+border寬度；
IE中：內(nèi)容寬度=您定義的容器寬度(InternetExplorer'width')-padding寬度-border寬度
(InternetExplorer'width'則是指整個容器的寬度，包括內(nèi)容，padding，border)
6.css布局的居中問題：FF火狐里設(shè)置margin-left,margin-right為auto時(shí)已經(jīng)居中,IE則設(shè)置body{TEXT-ALIGN:center;}才行
7.FF火狐設(shè)置padding后,div會增加height和width,但I(xiàn)E不會,故需要用!important多設(shè)一個height和width
8.在mozillafirefox和IE中的BOX模型解釋不一致導(dǎo)致相差2px解決方法：div{margin:30px!important;margin:28px;}
9.ul標(biāo)簽在FF火狐中默認(rèn)是有padding值的,而在IE中只有margin有值所以先定義ul{margin:0;padding:0;}
10.終結(jié)解決方法：
(1)!important：FF火狐和IE7對于"!important"會自動優(yōu)先解析，IE6則忽略,可用!important為FF火狐和IE7單獨(dú)設(shè)置樣式，不影響IE6的顯示，值得注意的是，一定要將xxxx!important這句放置在另一句之上。
示例：
- div{margin:30px!important;margin:15px;}
- //在FF火狐和IE7中margin:30px，在IE6中margin:15px;
(2)由于FF火狐和IE7都支持"!important"，而二者之間也存在差異，所以有時(shí)也會出現(xiàn)一些小問題，針對IE7可以使用使用"*+html"，
示例：
- #example{color:#333;}/*FF火狐下字體顏色顯示為#333*/
- *html#example{color:#666;}/*IE6下字體顏色顯示為#666*/
- *+html#example{color:#999;}/*IE7下字體顏色顯示為#999*/
【編輯推薦】
- Chroma屬性實(shí)現(xiàn)CSS濾鏡透明效果
- CSS Sprites圖片切割術(shù)與圖片優(yōu)化
- CSS中DIV彈出層問題解決方案
- CSS規(guī)范化命名通用命名規(guī)則
- CSS分欄布局的兩種方法：絕對定位和浮動
