DIV+CSS在IE6、IE7、Firefox下的使用技巧
DIV+CSS瀏覽器兼容問題一直困繞著許多從事DIV＋CSS網(wǎng)頁排版的美工人員，尤其是IE與火狐的兼容。這里和大家分享一下在IE6、IE7、Firefox下的DIV+CSS網(wǎng)頁布局的注意問題及技巧。
在IE6、IE7、Firefox下的DIV+CSS網(wǎng)頁布局的注意問題及技巧
DIV+CSS瀏覽器兼容問題一直困繞著許多從事DIV＋CSS網(wǎng)頁排版的美工人員，尤其是IE與火狐的兼容。用DIV+CSS布局的網(wǎng)頁在IE下顯示一切正常,可是在火狐（FireFox）瀏覽器里打開，本來好好網(wǎng)頁一下子就全亂了.讓人怎么看?這一定會影響到你的網(wǎng)站的推廣,seo優(yōu)化,不利于搜所引擎的搜索.所以解決DIV+CSS瀏覽器兼容的問題是完全必須的.
下面來看一下di+css瀏覽器兼容的實例，區(qū)分IE6，IE7，firefox火狐瀏覽器CSS的寫法先來分開區(qū)分一下。
◆首先聲明DIV+CSS瀏覽器兼容性IE6與IE7與火狐(firefox)的一些識別規(guī)則：
1.IE都能識別*;標(biāo)準(zhǔn)瀏覽器(如Firefox)不能識別*；
2.IE6能識別*，但不能識別!important,
3.IE7能識別*，也能識別!important;
4.firefox不能識別*，但能識別!important;
◆請看下簡單的DIV+CSS瀏覽器兼容實例:
1．IE6和firefox的區(qū)別：
background:orange;*background:blue;
意思就是火狐瀏覽器的背景顏色是橙色,而IE瀏覽器的背景色是藍色.
2.IE6和IE7的區(qū)別：
background:green!important;background:blue;
意思指的是:IE7的背景顏色是綠色,IE6的背景顏色是藍色
3.區(qū)別IE7與Firefox：
background:orange;*background:green;
意思指的是:火狐瀏覽器的背景顏色是橙色,而IE7的背景顏色是綠色
4.Firefox，IE7，IE6：
background:orange;*background:green!important;*background:blue;
意思是火狐瀏覽器的的背景橙色,IE7瀏覽器的背景顏色是綠色,而IE6瀏覽器的顏色是藍色.
為了更加清楚的來表達說明DIV+CSS瀏覽器兼容下面表格是更加清楚的能表達IE6,IE7,Firefox之間的識別標(biāo)識區(qū)別:
IE6 IE7 Firefox
* √ √ ×
important × √ √
_(下劃線) √ × ×
【注：:不管是什么方法，書寫的順序都是Firefox的寫在前面，IE7的寫在中間，IE6的寫在最后面?！?p#
一、CSSHACK以下兩種方法幾乎能解決現(xiàn)今所有HACK.
1、!important
隨著IE7對!important的支持,!important方法現(xiàn)在只針對IE6的HACK.【注：注意寫法.記得該聲明位置需要提前.】
2、IE6/IE7對FireFox
*+html與*html是IE特有的標(biāo)簽,firefox暫不支持.而*+html又為IE7特有標(biāo)簽.
注意:*+html對IE7的HACK必須保證HTML
頂部有如下聲明：
"http://www.w3.org/TR/html4/loose.dtd">
二、其他的一些技巧
技巧一：
1、Firefox下給div設(shè)置padding后會導(dǎo)致width和height增加,但IE不會.(可用!important解決)
2、居中問題.
1).垂直居中.將line-height設(shè)置為當(dāng)前div相同的高度,再通過vertical-align:middle.(注意內(nèi)容不要換行.)
2).水平居中.margin:0auto;(當(dāng)然不是萬能)
3、若需給a標(biāo)簽內(nèi)內(nèi)容加上樣式,需要設(shè)置display:block;
(常見于導(dǎo)航標(biāo)簽)
4、Firefox和IE對BOX理解的差異導(dǎo)致相差2px的還有設(shè)為float的div在ie下margin加倍等問題.
5、ul標(biāo)簽在Firefox下面默認(rèn)有l(wèi)ist-style和padding.最好事先聲明,以避免不必要的麻煩.(常見于導(dǎo)航標(biāo)簽和內(nèi)容列表)
6、作為外部wrapper的div不要定死高度,最好還加上overflow:hidden.以達到高度自適應(yīng).
7、關(guān)于手形光標(biāo).cursor:pointer.而hand只適用于IE.
技巧二：針對firefoxie6ie7的css樣式
現(xiàn)在大部分都是用!important來hack，對于ie6和firefox測試可以正常顯示，但是ie7對!important可以正確解釋，會導(dǎo)致頁面沒按要求顯示！找到一個針對IE7不錯的hack方式就是使用“*+html”，現(xiàn)在用IE7瀏覽一下，應(yīng)該沒有問題了。
現(xiàn)在寫一個CSS可以這樣：
- #1{
- color:#333;
- }/*Moz*/
- *html#1{
- color:#666;
- }/*IE6*/
- *+html#1{
- color:#999;
- }/*IE7*/
那么在firefox下字體顏色顯示為#333，IE6下字體顏色顯示為#666，IE7下字體顏色顯示為#999。
技巧三：css布局中的居中問題
主要的樣式定義如下：
- body{
- text-align:center;
- }
- #center{
- margin-right:auto;
- margin-left:auto;
- }
說明：
首先在父級元素定義TEXT-ALIGN:center;這個的意思就是在父級元素內(nèi)的內(nèi)容居中；對于IE這樣設(shè)定就已經(jīng)可以了。但在mozilla中不能居中。解決辦法就是在子元素定義時候設(shè)定時再
加上“MARGIN-RIGHT:auto;MARGIN-LEFT:auto;”需要說明的是，如果你想用這個方法使整個頁面要居中，建議不要套在一個DIV里，你可以依次拆出多個div，
只要在每個拆出的div里定義MARGIN-RIGHT:auto;MARGIN-LEFT:auto;就可以了。#p#
技巧四：浮動ie產(chǎn)生的雙倍距離
#box{float:left;width:100px;margin:000100px;
//這種情況之下IE會產(chǎn)生200px的距離display:inline;//使浮動忽略}
這里細說一下block,inline兩個元素,Block元素的特點是:總是在新行上開始,高度,寬度,行高,邊距都可以控制(塊元素);Inline元素的特點是:和其他元素在同一行上,...不可控制(內(nèi)嵌元素);
#box{display:block;//可以為內(nèi)嵌元素模擬為塊元素display:inline;
//實現(xiàn)同一行排列的的效果diplay:table;
技巧五：IE與寬度和高度的問題
IE不認(rèn)得min-這個定義，但實際上它把正常的width和height當(dāng)作有min的情況來使。這樣問題就大了，如果只用寬度和高度，正常的瀏覽器里這兩個值就不會變，如果只用min-width和min-height的話，IE下面根本等于沒有設(shè)置寬度和高度。
比如要設(shè)置背景圖片，這個寬度是比較重要的。要解決這個問題，可以這樣：
- #box{
- width:80px;
- height:35px;
- }
- html>body#box{
- width:auto;
- height:auto;
- min-width:80px;
- min-height:35px;
- }
技巧六：頁面的最小寬度
min-width是個非常方便的CSS命令，它可以指定元素最小也不能小于某個寬度，這樣就能保證排版一直正確。但IE不認(rèn)得這個，而它實際上把width當(dāng)做最小寬度來使。為了讓這一命令在IE上也能用，
可以把一個放到標(biāo)簽下，然后為div指定一個類。
然后CSS這樣設(shè)計：
- #container{
- min-width:600px;
- width:expression(document.body.clientWidth<
- 600?"600px":"auto");
- }
第一個min-width是正常的；但第2行的width使用了Javascript，這只有IE才認(rèn)得，這也會讓你的HTML文檔不太正規(guī)。它實際上通過Javascript的判斷來實現(xiàn)最小寬度。
技巧七：清除浮動.
- hackbox{
- display:table;//將對象作為塊元素級的表格顯示
- }
或者
- .hackbox{
- clear:both;
- }
或者加入:after（偽對象）,設(shè)置在對象后發(fā)生的內(nèi)容，通常和content配合使用，IE不支持此偽對象，非Ie瀏覽器支持，所以并不影響到IE/WIN瀏覽器。這種的最麻煩的......
- #box:after{
- content:".";
- display:block;
- height:0;
- clear:both;
- visibility:hidden;
- }
#p#技巧八：DIV浮動
IE文本產(chǎn)生3象素的bug左邊對象浮動，右邊采用外補丁的左邊距來定位，右邊對象內(nèi)的文本會離左邊有3px的間距.
- #box{
- float:left;
- width:800px;
- }
- #left{float:left;
- width:50%;
- }#right{
- width:50%;
- }
- *html#left{
- margin-right:-3px;//這句是關(guān)鍵}
- HTML代碼
技巧九：屬性選擇器(這個不能算是兼容,是隱藏css的一個bug)
p[id]{}div[id]{}
這個對于IE6.0和IE6.0以下的版本都隱藏,Firefox和OPera作用屬性選擇器和子選擇器還是有區(qū)別的,子選擇器的范圍從形式來說縮小了,屬性選擇器的范圍比較大,如p[id]中,所有p標(biāo)簽中有id的都是同樣式的.
技巧十：IE捉迷藏的問題
當(dāng)div應(yīng)用復(fù)雜的時候每個欄中又有一些鏈接，DIV等這個時候容易發(fā)生捉迷藏的問題。
有些內(nèi)容顯示不出來，當(dāng)鼠標(biāo)選擇這個區(qū)域是發(fā)現(xiàn)內(nèi)容確實在頁面。
解決辦法：對#layout使用line-height屬性或者給#layout使用
固定高和寬。頁面結(jié)構(gòu)盡量簡單。
技巧十一：高度不適應(yīng)
高度不適應(yīng)是當(dāng)內(nèi)層對象的高度發(fā)生變化時外層高度不能自動進行調(diào)節(jié)，特別是當(dāng)內(nèi)層對象使用margin或padding時。
例：
- CSS：
- #box{
- background-color:#eee;
- }
- #boxp{
- margin-top:20px;
- margin-bottom:20px;
- text-align:center;
- }
解決方法：在P對象上下各加2個空的div對象CSS代碼：
- .1{height:0px;overflow:hidden;}
或者為DIV加上border屬性。
【編輯推薦】
- IE8與IE7中頁面打開速度和資源占用對比
- 探究IE8與IE7具體功能中窗口功能按鈕的變化
- IE6 IE7 IE8三個版本的CSS兼容速查手冊
- 探秘IE8 JavaScript功能超乎想象
- 技術(shù)前沿 一段JS代碼輕松解決IE6-IE8的兼容性問題
