DIV+CSS在IE6、IE7、Firefox下的使用技巧
DIV+CSS瀏覽器兼容問題一直困繞著許多從事DIV＋CSS網頁排版的美工人員，尤其是IE與火狐的兼容。這里和大家分享一下在IE6、IE7、Firefox下的DIV+CSS網頁布局的注意問題及技巧。
在IE6、IE7、Firefox下的DIV+CSS網頁布局的注意問題及技巧
DIV+CSS瀏覽器兼容問題一直困繞著許多從事DIV＋CSS網頁排版的美工人員，尤其是IE與火狐的兼容。用DIV+CSS布局的網頁在IE下顯示一切正常,可是在火狐（FireFox）瀏覽器里打開，本來好好網頁一下子就全亂了.讓人怎么看?這一定會影響到你的網站的推廣,seo優化,不利于搜所引擎的搜索.所以解決DIV+CSS瀏覽器兼容的問題是完全必須的.
下面來看一下di+css瀏覽器兼容的實例，區分IE6，IE7，firefox火狐瀏覽器CSS的寫法先來分開區分一下。
◆首先聲明DIV+CSS瀏覽器兼容性IE6與IE7與火狐(firefox)的一些識別規則：
1.IE都能識別*;標準瀏覽器(如Firefox)不能識別*；
2.IE6能識別*，但不能識別!important,
3.IE7能識別*，也能識別!important;
4.firefox不能識別*，但能識別!important;
◆請看下簡單的DIV+CSS瀏覽器兼容實例:
1．IE6和firefox的區別：
background:orange;*background:blue;
意思就是火狐瀏覽器的背景顏色是橙色,而IE瀏覽器的背景色是藍色.
2.IE6和IE7的區別：
background:green!important;background:blue;
意思指的是:IE7的背景顏色是綠色,IE6的背景顏色是藍色
3.區別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之間的識別標識區別:
IE6 IE7 Firefox
* √ √ ×
important × √ √
_(下劃線) √ × ×
【注：:不管是什么方法，書寫的順序都是Firefox的寫在前面，IE7的寫在中間，IE6的寫在最后面?！?p#
一、CSSHACK以下兩種方法幾乎能解決現今所有HACK.
1、!important
隨著IE7對!important的支持,!important方法現在只針對IE6的HACK.【注：注意寫法.記得該聲明位置需要提前.】
2、IE6/IE7對FireFox
*+html與*html是IE特有的標簽,firefox暫不支持.而*+html又為IE7特有標簽.
注意:*+html對IE7的HACK必須保證HTML
頂部有如下聲明：
"http://www.w3.org/TR/html4/loose.dtd">
二、其他的一些技巧
技巧一：
1、Firefox下給div設置padding后會導致width和height增加,但IE不會.(可用!important解決)
2、居中問題.
1).垂直居中.將line-height設置為當前div相同的高度,再通過vertical-align:middle.(注意內容不要換行.)
2).水平居中.margin:0auto;(當然不是萬能)
3、若需給a標簽內內容加上樣式,需要設置display:block;
(常見于導航標簽)
4、Firefox和IE對BOX理解的差異導致相差2px的還有設為float的div在ie下margin加倍等問題.
5、ul標簽在Firefox下面默認有list-style和padding.最好事先聲明,以避免不必要的麻煩.(常見于導航標簽和內容列表)
6、作為外部wrapper的div不要定死高度,最好還加上overflow:hidden.以達到高度自適應.
7、關于手形光標.cursor:pointer.而hand只適用于IE.
技巧二：針對firefoxie6ie7的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。
技巧三：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;就可以了。#p#
技巧四：浮動ie產生的雙倍距離
#box{float:left;width:100px;margin:000100px;
//這種情況之下IE會產生200px的距離display:inline;//使浮動忽略}
這里細說一下block,inline兩個元素,Block元素的特點是:總是在新行上開始,高度,寬度,行高,邊距都可以控制(塊元素);Inline元素的特點是:和其他元素在同一行上,...不可控制(內嵌元素);
#box{display:block;//可以為內嵌元素模擬為塊元素display:inline;
//實現同一行排列的的效果diplay:table;
技巧五：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;
- }
技巧六：頁面的最小寬度
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的判斷來實現最小寬度。
技巧七：清除浮動.
- hackbox{
- display:table;//將對象作為塊元素級的表格顯示
- }
或者
- .hackbox{
- clear:both;
- }
或者加入:after（偽對象）,設置在對象后發生的內容，通常和content配合使用，IE不支持此偽對象，非Ie瀏覽器支持，所以并不影響到IE/WIN瀏覽器。這種的最麻煩的......
- #box:after{
- content:".";
- display:block;
- height:0;
- clear:both;
- visibility:hidden;
- }
#p#技巧八：DIV浮動
IE文本產生3象素的bug左邊對象浮動，右邊采用外補丁的左邊距來定位，右邊對象內的文本會離左邊有3px的間距.
- #box{
- float:left;
- width:800px;
- }
- #left{float:left;
- width:50%;
- }#right{
- width:50%;
- }
- *html#left{
- margin-right:-3px;//這句是關鍵}
- HTML代碼
技巧九：屬性選擇器(這個不能算是兼容,是隱藏css的一個bug)
p[id]{}div[id]{}
這個對于IE6.0和IE6.0以下的版本都隱藏,Firefox和OPera作用屬性選擇器和子選擇器還是有區別的,子選擇器的范圍從形式來說縮小了,屬性選擇器的范圍比較大,如p[id]中,所有p標簽中有id的都是同樣式的.
技巧十：IE捉迷藏的問題
當div應用復雜的時候每個欄中又有一些鏈接，DIV等這個時候容易發生捉迷藏的問題。
有些內容顯示不出來，當鼠標選擇這個區域是發現內容確實在頁面。
解決辦法：對#layout使用line-height屬性或者給#layout使用
固定高和寬。頁面結構盡量簡單。
技巧十一：高度不適應
高度不適應是當內層對象的高度發生變化時外層高度不能自動進行調節，特別是當內層對象使用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功能超乎想象
- 技術前沿 一段JS代碼輕松解決IE6-IE8的兼容性問題
