DIV+CSS IE6/IE7/IE8/FF兼容問題彙總

時間 2019-11-10
標籤 div+css div css ie6 ie7 ie8 兼容問題彙總欄目 HTML 简体版
原文原文鏈接
1.IE8下兼容問題，這個最好處理，轉化成ie7兼容就能夠。在頭部加以下一段代碼，而後只要在IE7下兼容了，IE8下面也就兼容了
<meta http-equiv="x-ua-compatible" content="ie=7" />
 2.flaot浮動形成IE6下面雙倍邊距問題，這個最多見，也最好處理，!important解決，好比
margin-left:10px !important;;
 margin-left:5px;
 +height:120px;
 5.有時候，會在佈局的時候，發現，有一個DIV浮動了，接下來的一個DIV原本是要在下面顯示的，結果跑上面去了，這種狀況通常在FF下面會出現，解決 的辦法就是清除一下浮動，在設置過浮動的那個DIV下面加一個DIV，CSS面寫個clear:both;以下

<

div style="float:left;height:100px; width:500px;">


<

div style="clear:both;">


<

div style="height:100px; width=300px">
 6. 再就是居中問題，這個問題在新手身上不少，主要緣由是對盒子模型不夠理解，沒熟記盒子模型，若是發現你的頁面沒有局中，我如今知道的，有這幾個緣由：1. 一個是沒盒子，就是BODY後的一個大DIV把全部DIV裝起來的那個，你沒寫。2.就是你寫了，可是寬度沒用絕對寬度：而是用一個相對的寬度，想局中， 必須用絕對寬度。-
7.擴展：若是我想在設計的時候，實現IE6，IE7,FF下出現三種不一樣的效果，好比IE6下背景紅色，IE7下藍色FF下綠色，這裏，我本身試過，能夠，用兼容的方法（注意順序，能夠好好理解一下）。7 L& t- o7 k- a1 I
 background:red;
 +background:blue !important;
 +background:green;

 DIV CSS設計時IE六、IE七、FF 與兼容性有關的特性在網站設計的時候，應該注意css樣式兼容不一樣瀏覽器問題，特別是對徹底使用DIV CSS設計的網，就應該更注意IE6 IE7 FF對CSS樣式的兼容，否則，你的網亂可能出去不想出現的效果！
 全部瀏覽器 通用 height: 100px; 
 IE6 專用 _height: 100px; 
 IE6 專用 *height: 100px;
 IE7 專用 *+height: 100px;
 IE七、FF 共用 height: 100px !important;
1、CSS 兼容 
 如下兩種方法幾乎能解決現今全部兼容. 
1, !important (不是很推薦，用下面的一種感受最安全) 
隨着IE7對!important的支持, !important 方法如今只針對IE6的兼容.(注意寫法.記得該聲明位置須要提早.) 
代碼: 
 <style> 
 #wrapper { 
 width: 100px!important; /* IE7+FF */ 
 width: 80px; /* IE6 */ 
 } 
 </style> 
 2, IE6/IE77對FireFox <from 針對firefox ie6 ie7的css樣式> 
 *+html 與 *html 是IE特有的標籤, firefox 暫不支持.而*+html 又爲 IE7特有標籤. 
代碼: 
 <style> 
 #wrapper { width: 120px; } /* FireFox */ 
 *html #wrapper { width: 80px;} /* ie6 fixed */ 
 *+html #wrapper { width: 60px;} /* ie7 fixed, 注意順序 */ 
 </style> 
注意: 
 *+html 對IE7的兼容 必須保證HTML頂部有以下聲明： 
 代碼: 
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"　"http://www.w3.org/TR/html4/loose.dtd"> 
2、萬能 float 閉合(很是重要!) 能夠用這個解決多個div對齊時的間距不對，
 關於 clear float 的原理可參見 [How To Clear Floats Without Structural Markup] 
將如下代碼加入Global CSS 中,給須要閉合的div加上 class=」clearfix」 便可,屢試不爽. 
代碼: 
 <style> 
 /* Clear Fix */ 
 .clearfix:after { 
 content:"."; 
 display:block; 
 height:0; 
 clear:both; 
 visibility:hidden; 
 } 
 .clearfix { 
 display:inline-block; 
 } 
 /* Hide from IE Mac \*/ 
 .clearfix {display:block;} 
 /* End hide from IE Mac */ 
 /* end of clearfix */ 
 </style>
3、其餘兼容技巧(至關有用) 
1, FF下給 div 設置 padding 後會致使 width 和 height 增長, 但IE不會.(可用!important解決) 
2, 居中問題. 
1).垂直居中.將 line-height 設置爲 當前 div 相同的高度, 再經過 vetical-align: middle.( 注意內容不要換行.) 
2).水平居中. margin: 0 auto;(固然不是萬能) 
3, 若需給 a 標籤內內容加上 樣式, 須要設置 display: block;(常見於導航標籤) 
4, FF 和 IE 對 BOX 理解的差別致使相差 2px 的還有設爲 float的div在ie下 margin加倍等問題. 
5, ul 標籤在 FF 下面默認有 list-style 和 padding . 最好事先聲明, 以免沒必要要的麻煩. (常見於導航標籤和內容列表) 
6, 做爲外部 wrapper 的 div 不要定死高度, 最好還加上 overflow: hidden.以達到高度自適應. 
7, 關於手形光標. cursor: pointer. 而hand 只適用於 IE.貼上代碼: 
兼容代碼:兼容最推薦的模式。 
/* FF */ 
 .submitbutton { 
 float:left; 
 width: 40px; 
 height: 57px; 
 margin-top: 24px; 
 margin-right: 12px; 
 } 
 /* IE6 */ 
 *html .submitbutton { 
 margin-top: 21px; 
 } 
 /* IE7 */ 
 *+html .submitbutton { 
 margin-top: 21px; 
 } 
什麼是瀏覽器兼容：當咱們使用不一樣的瀏覽器（Firefox IE7 IE6）訪問同一個網站，或者頁面的時候，會出現一些不兼容的問題，有的顯示出來正常，有的顯示出來不正常，咱們在編寫CSS的時候會很惱火，剛修復了這 個瀏覽器的問題，結果另一個瀏覽器卻出了新問題。而兼容就是一種辦法，能讓你在一個CSS裏面獨立的寫支持不一樣瀏覽器的樣式。這下就和諧了。呵呵！ 
 最近微軟發佈的IE7瀏覽器的兼容性確實給一些網頁製做人員添加了一個沉重的負擔，雖然IE7已經走向標準化，但仍是有許多和FF不一樣的地方，因此須要用 到IE7的兼容，有許多朋友問過IE7的兼容是什麼，其實我也不知道。暫時還沒找到IE7專用的兼容。除了前面那片文章，《針對firefox ie6 ie7的css樣式》中的兼容方式也是很好用的。 
 有一點邏輯思想的人都會知道能夠用IE和FF的兼容結合起來使用，下面介紹三個兼容，例如：（適合新手，呵呵，高手就在這裏路過吧。） 
 程序代碼 
 第一個兼容，IE FF 全部瀏覽器 公用（其實也不算是兼容） 
height:100px; 
第二個兼容 IE6專用 
_height:100px; 
第三個兼容 IE6 IE7公用 
*height:100px; 
介紹完了這三個兼容了，下面咱們再來看看如何在一個樣式裏分別給一個屬性定義IE6 IE7 FF專用的兼容，看下面的代碼，順序不能錯哦： 
 程序代碼 
height:100px; 
 *height:120px; 
 _height:150px; 
下面我簡單解釋一下各瀏覽器怎樣理解這三個屬性： 
 在FF下，第二、3個屬性FF不認識，因此它讀的是 height:100px; 
在IE7下，第三個屬性IE7不認識，因此它讀第一、2個屬性，又由於第二個屬性覆蓋了第一個屬性，因此IE7最終讀出的是第2個屬性 *height:120px; 
在IE6下，三個屬性IE6都認識，因此三個屬性均可以讀取，又由於第三個屬性覆蓋掉前2個屬性，因此IE6最終讀取的是第三個屬性。 
1 針對firefox ie6 ie7的css樣式 
 如今大部分都是用!important來兼容，對於ie6和firefox測試能夠正常顯示，可是ie7對!important能夠正確解釋，會致使頁面 沒按要求顯示！找到一個針對IE7不錯的兼容方式就是使用「*+html」，如今用IE7瀏覽一下，應該沒有問題了如今寫一個CSS能夠這樣： 
#1 { color: #333; } /* Moz */ 
 * html #1 { color: #666; } /* IE6 */ 
 *+html #1 { color: #999; } /* IE*/
那麼在firefox下字體顏色顯示爲#333IE6下字體顏色顯示爲#666，IE7下字體顏色顯示爲#999。 
2 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; 就能夠了。 
3 盒模型不一樣解釋. 
 #box{ 
 width:600px; 
 //for ie6.0- w\idth:500px; 
 //for ff+ie6.0 
 } 
 #box{ 
 width:600px!important 
 //for ff 
 width:600px; 
 //for ff+ie6.0 
 width /**/:500px; 
 //for ie6.0- 
 } 
 4 浮動ie產生的雙倍距離 
#box{ float:left; width:100px; margin:0 0 0 100px; //這種狀況之下IE會產生200px的距離 display:inline; //使浮動忽略} 
這裏細說一下block,inline兩個元素,Block元素的特色是:老是在新行上開始,高度,寬度,行高,邊距均可以控制(塊元素);Inline元素的特色是:和其餘元素在同一行上,…不可控制(內嵌元素); 
 #box{ display:block; //能夠爲內嵌元素模擬爲塊元素 display:inline; //實現同一行排列的的效果
iplay:table;
 5 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;}
 6 頁面的最小寬度 
min-width是個很是方便的CSS命令，它能夠指定元素最小也不能小於某個寬度，這樣就能保證排版一直正確。但IE不認得這個，而它實際上把 width當作最小寬度來使。爲了讓這一命令在IE上也能用，能夠把一個

<

div> 放到 <body> 標籤下，而後爲div指定一個類： 
 而後CSS這樣設計：
#container{ 
 min-width: 600px; 
 width:e-xpression(document.body.clientWidth < 600? 「600px」: 「auto」 ); 
 } 
第一個min-width是正常的；但第2行的width使用了Javascript，這隻有IE才認得，這也會讓你的HTML文檔不太正規。它實際上經過Javascript的判斷來實現最小寬度。
7 清除浮動 
.兼容box{ 
 display:table; 
 //將對象做爲塊元素級的表格顯示 
} 
或者 
.兼容box{ 
 clear:both; 
 } 
或者加入:after（僞對象）,設置在對象後發生的內容，一般和content配合使用，IE不支持此僞對象，非Ie 瀏覽器支持，因此並不影響到IE/WIN瀏覽器。這種的最麻煩的 
……#box:after{ 
 content: 「.」; 
display: block; 
 height: 0; 
 clear: both; 
 visibility: hidden; 
 } 
 8 DIV浮動IE文本產生3象素的bug 
左邊對象浮動，右邊採用外補丁的左邊距來定位，右邊對象內的文本會離左邊有3px的間距. 
 #box{ 
 float:left; 
 width:800px;} 
 #left{ 
 float:left; 
 width:50%;} 
 #right{ 
 width:50%; 
 } 
 *html #left{ 
 margin-right:-3px; 
 //這句是關鍵 
} 
HTML代碼 
<DIV id=box> 
 <DIV id=left></DIV> 
 <DIV id=right></DIV> 
 </DIV>
 9 屬性選擇器(這個不能算是兼容,是隱藏css的一個bug) 
 p[id]{}div[id]{} 
 p[id]{}div[id]{}
這個對於IE6.0和IE6.0如下的版本都隱藏,FF和OPera做用 
 屬性選擇器和子選擇器仍是有區別的,子選擇器的範圍從形式來講縮小了,屬性選擇器的範圍比較大,如p[id]中,全部p標籤中有id的都是一樣式的. 
10 IE捉迷藏的問題 
 當div應用複雜的時候每一個欄中又有一些連接，DIV等這個時候容易發生捉迷藏的問題。 
 有些內容顯示不出來，當鼠標選擇這個區域是發現內容確實在頁面。 
 解決辦法：對#layout使用line-height屬性 或者給#layout使用固定高和寬。頁面結構儘可能簡單。 
11 高度不適應 
 高度不適應是當內層對象的高度發生變化時外層高度不能自動進行調節，特別是當內層對象使用 
margin 或paddign 時。例： 


<div id=」box」> 
 <p>p對象中的內容</p> 
 </div>


 CSS： 
#box {background-color:#eee; } 
 #box p {margin-top: 20px;margin-bottom: 20px; text-align:center; } 
解決方法：在P對象上下各加2個空的div對象CSS代碼：.1{height:0px;overflow:hidden;}或者爲DIV加上border屬性。 
 屏蔽IE瀏覽器（也就是IE下不顯示） 
*:lang(zh) select {font:12px !important;} /*FF,OP可見*/ 
select:empty {font:12px !important;} /*safari可見*/ 
這裏select是選擇符，根據狀況更換。第二句是MAC上safari瀏覽器獨有的。 
 僅IE7識別 
*+html {…} 
當面臨須要只針對IE7作樣式的時候就能夠採用這個兼容。 
IE6及IE6如下識別 
* html {…} 
這個地方要特別注意不少地主都寫了是IE6的兼容其實IE5.x一樣能夠識別這個兼容。其它瀏覽器不識別。 
html/**/ >body select {……} 
這句與上一句的做用相同。 
 僅IE6不識別 
select { display /*IE6不識別*/:none;} 
這裏主要是經過CSS註釋分開一個屬性與值，流釋在冒號前。 
 僅IE6與IE5不識別 
select/**/ { 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中，當子級都爲浮動時，那麼父級的高度就沒法徹底的包住整個子級，那麼這時用這個清除浮動的兼容來對父級作一次定義，那麼就能夠解決這個問題 。
 截字省略號 
select { -o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrapoverflow:hidden; } 
這個是在越出長度後會自行的截掉多出部分的文字，並以省略號結尾，很好的一個技術。只是目前Firefox並不支持。
 只有Opera識別 
@media all and (min-width: 0px){ select {……} } 
針對Opera瀏覽器作單獨的設定。
 以上都是寫CSS中的一些兼容，建議遵循正確的標籤嵌套(div ul li 嵌套結構關係)，這樣能夠減小你使用兼容的頻率，不要進入理解誤區，並非一個頁面就須要不少的兼容來保持多瀏覽器兼容)，不少狀況下也許一個兼容都不用 也可讓瀏覽器工做得很是好，這些都是用來解決局部的兼容性問題，若是但願把兼容性的內容也分離出來，不妨試一下下面的幾種過濾器。這些過濾器有的是寫在 CSS中經過過濾器導入特別的樣式，也有的是寫在HTML中的經過條件來連接或是導入須要的補丁樣式。
IE5.x的過濾器，只有IE5.x可見 
@media tty { 
 i{content:"";/*" "*/}} @import ’ie5win.css’; /*";} 
 }/* */
IE5/MAC的過濾器，通常用不着 
/**//*/ 
 @import "ie5mac.css"; 
 /**/
下面是IE的條件註釋，我的以爲用條件註釋調用相應 兼容是比較完美的多瀏覽器兼容的解決辦法。把須要兼容的地方單獨放到一個文件裏面，當瀏覽器版本符合的時候就能夠調用那個被兼容的樣式，這樣不只使用起來 很是方便，並且對於製做這個CSS自己來說，能夠更嚴格的觀察到是否有必要使用兼容，不少狀況下，當我本人寫CSS若是把所有代碼包括兼容都寫到一個 CSS文件的時候的時候會很隨意，想怎麼兼容就怎麼兼容，而你獨立出來寫的時候，你就會不自覺的考慮是否有必要兼容，是先兼容 CSS？仍是先把主CSS裏面的東西調整到儘量的不須要兼容？當你僅用不多的兼容就讓不少瀏覽器很乖很聽話的時候，你是否是頗有成就感呢？你知道怎麼選 擇了吧～～呵呵
IE的if條件兼容 本身能夠靈活使用參看這篇IE條件註釋 
Only IE 
全部的IE可識別
 只有IE5.0能夠識別 
Only IE 5.0+ 
 IE5.0包換IE5.5均可以識別
 僅IE6可識別 
Only IE 7/- 
IE6以及IE6如下的IE5.x均可識別 
Only IE 7/- 
僅IE7可識別
Css 當中有許多的東西不不按照某些規律來的話，會讓你很心煩，雖然你能夠經過不少的兼容，不少的!important 來控制它，可是你會發現久而久之你會很不甘心，看看許多優秀的網站，他們的CSS讓IE6,Ie7,Firefox,甚至Safari,Opera運行起 來天衣無縫是否是很羨慕？而他們看似複雜的模版下面使用的兼容 少得可憐。其實你要知道IE 和 Firefox 並不不是那麼的不和諧，咱們找到必定的方法，是徹底可讓他們和諧共處的。不要你認爲發現了兼容的辦法，你就掌握了一切，咱們並非兼容的奴隸。
div ul li 的嵌套順序
 今天只講一個規則。就是

<

div>

<

ul><li>的三角關係。個人經驗就是

<

div>在最外面，裏面 是

<

ul>，而後再是<li>，固然<li>裏面又能夠嵌套

<

div>什麼的，可是並不建議你嵌套不少 東西。當你符合這樣的規則的時候，那些倒黴的，不聽話的間隙就不會在裏面出現了，當你僅僅是

<

div>裏面放<li>，而不用 

<

ul>的時候，你會發現你的間隙十分難控制，通常狀況下，IE6和IE7會憑空多一些間距。但不少狀況你來到下一行，間隙就沒了，可是前面 的內容又空了很大一塊，出現這種狀況雖然你能夠改變IE的Margin，而後調整Firefox下面的Padding，以便使得二者顯示起來得效果很相 似，可是你得CSS將變得臭長無比，你不得很少考慮更多可能出現這種問題補救措施，雖然你知道千篇一概來兼容它們，可是你會煩得要命。
 具體嵌套寫法
 遵循上面得嵌套方式，

<

div>

<ul><li></li></ul>

< /div> 而後在CSS 裏面告訴 ul {Margin:0px;Padding:0px;list-style:none;}，其中list-style:none是不讓<li> 標記的最前方顯示圓點或者數字等目錄類型的標記，由於IE和Firefox顯示出來默認效果有些不同。所以這樣不須要作任何手腳，你的IE六、和 IE七、Firefox顯示出來的東西(外距，間距，高度，寬度)就幾乎沒什麼區別了，也許細心的你會在某一個時刻發現1、兩個象素的差異，但那已經很完 美了，不須要你經過調整大片的CSS來控制它們的顯示了，你願意，你能夠僅僅兼容一兩個地方，並且一般這種兼容能夠適應各類地方，不須要你重複在不一樣的地 方調試不一樣的兼容方式–減輕你的煩。你能夠ul.class1, ul.class2, ul.class3 {xxx:xxxx}的方式方便的整理出你要兼容的地方，而統一兼容。嘗試一下吧，不再要亂嵌套了，雖然在Div+CSS的方式下你幾乎能夠想怎麼嵌套 就怎麼嵌套，可是按照上面的規律你將輕鬆不少，從而事半功倍

 用css hack解決IE5 IE5.5 IE6 Firefox瀏覽器兼容性
2006年12月08日 星期五 上午 08:49
一直比較關注，最近找了一個比較全的，分享一下。 
 爲了避免同瀏覽器的觀看效果，咱們固然不必爲每一個瀏覽器的不一樣版本寫一個樣式，這裏咱們利用「IE條件註釋」。 
 找了一些相關的CSS HACK後，總結的幾個方法。 
1. 區別FF和IE 
 1-1 
首先，固然是!important大法，能夠提高指定樣式規則的應用優先權，以下面的例子： 
 插入代碼：
div{ 
 background-color: red !important; 
 background-color: blue; 
 }由於!important聲明在IE6中並非絕對的，它會被以後的同名屬性定義所替換。也就是說在上面的例子中，IE6所應用的是最後一個背景色的值，即「blue」；而在FF中背景色的值爲「red」。 
1-2 
還有一種方法，就是IE瀏覽器能夠識別「>」等一些符號，如「~」、「`」、「
插入代碼：
div{ 
 background-color: red; 
 >background-color: blue; 
 }在FF中獲得的是背景色紅色，而在IE中獲得的背景色是藍色，根據樣式重定義的規則，若是瀏覽器能夠識別「>」，則應該獲得的藍色的背景，所以能夠知道「>」只有IE能夠識別。 
 這樣，咱們就能夠把FF和IE的樣式分離開。下面就是解決IE本身的問題了。 
2. 區別IE5.5和IE的其餘版本 
 看一個例子： 
 插入代碼：
div{ 
 >background-color: black; 
 >background-color /*IE5.5*/: green; 
 }這個例子使用了「>」，只有IE能夠識別，在IE6中獲得了黑色的背景；而在IE5.5中獲得的綠色的背景；在IE5中也獲得了黑色的背景。這就 說明了第二句定義只有IE5.5能識別，這是個很早就公佈的HACK，能夠在網上找到相關的資料，要注意的就是在屬性名以後是有一個空格的。 
 到此咱們已經把FF、IE5.五、IE6分離出來了，那IE5呢？其實如今咱們只要把IE5跟IE6分開就OK了。 
3. 區別IE5與IE5.5+ 
插入代碼：
div{ 
 >background-color: red; 
 } 
 div/*IE5.5+*/{ 
 >background-color: black; 
 }這裏咱們又用到一個HACK，就是「div/**/{}」，這個定義在IE5以上的版本才能識別出來。這個例子獲得的結果是，在IE5中的背景色爲紅色；在IE5以上版本中獲得的是黑色背景。 
4. 完整的Hack 
這樣咱們就能夠爲不一樣的瀏覽器定義不一樣的樣式了。來看個完整的例子： 
 插入代碼：
div{ 
 width: 500px; 
 height: 50px; 
 background-color: red !important;/*FF*/ 
 background-color: blue;/*IE5*/ 
 text-align:center; 
 } 
 div/*IE5.5+*/{ 
 >/*IE only*/background-color: black;/*IE6*/ 
 >/*IE only*/background-color /*IE5.5*/: green; 
 }須要注意的是，在上面例子中「background-color」定義的順利不能改變，即FF-IE5-IE6-IE5.5。對於IE的定義在屬性前要加「>」，由於「div/**/{}」這個HACK在FF中能夠識別。
 鼠標手形:(兼容IE FF) hand等同於pointer，然後者能夠兼容IE和F！
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
在ff測試div+css的過程當中發現很多問題，主要緣由是代碼的不規範書寫。
一、居中問題
div裏的內容，ie默認爲居中，而ff默認爲左對齊。
 使ff內容居中的方法是增長代碼margin:auto;

 二、高度問題
 設有兩橫行div排列，上面的div設置高度(height)，若是div裏的實際內容大於所設高度，在ff中會出現兩個div重疊的現象；但在ie中， 下面的div會自動給上面的div讓出空間。因此爲避免出現層的重疊，高度必定要控制恰當，或者乾脆不寫高度，讓他自動調節。
 或者設置：overflow:hidden

 三、clear:both;
拿footer爲例，有時候若是上面使用 了float控制的n列的佈局，那麼在用ff瀏覽時footer頗有可能不老實，處處亂動——由於他還在受到浮動（float）的控制。若是想讓它老老實 實呆在頁面下方，在footer的div中寫入clear:both;就能夠達到效果了！

四、浮動ie產生的雙倍距離
#box{
 float:left;
 width:100px;
 margin:0 0 0 100px; //這種狀況之下IE會產生200px的距離
display:inline; //使浮動忽略
}

五、重點講解：display:block,inline兩個元素 display(顯示)
display:block; //能夠爲內嵌元素模擬爲塊元素
display:inline; //實現同一行排列的的效果
diplay:table; //for ff,模擬table的效果
Display:block元素的特色是：
 老是在新行上開始；
 高度，行高以及頂和底邊距均可控制；
 寬度缺省是它的容器的100%，除非設定一個寬度


<

div>, 

<

p>, 

<

h1>, 

<

form>, 

<

ul> 和 <li>是塊元素的例子。
display:inline就是將元素顯示爲行內元素.
inline元素的特色是：
 和其餘元素都在一行上；
 高，行高及頂和底邊距不可改變；
 寬度就是它的文字或圖片的寬度，不可改變。
<span>, <a>, <label>, <input>, <img>, <strong> 和<em>是inline元素的例子。
 例子：
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 <title>無標題文檔</title>
 <style type="text/css">
 #inline{width:400px; height:40px;background:#99CCCC;padding:15px 0px 0px 15px}
 #inline ul{ margin:0px; list-style:none;}
 #inline ul li{display:inline; font-size:12px;margin-left:5px}
 #block{width:400px; height:40px;background:#FFCC99;padding:15px 0px 0px 15px}
 #block ul{ margin:0px; list-style:none;}
 #block ul li{display:block; font-size:12px;height:20px}
 #div_inline{ width:800px;display:inline;height:120px;}
 </style>
 </head>
 <body>


<div id="inline">
 <ul>
 <li>每天招生網
<li>心血管網
<li>高血壓網
<li>先心病網
</ul>
 </div>




<p>
 <div id="block">
 <ul>
 <li>每天招生網</li>
 <li>心血管網</li>
 <li>高血壓網</li>
 <li>先心病網</li>
 </ul>
 </div>
 </p>


 </body></html>

 六、IE與FF寬度和高度的問題
min -width是個很是方便的CSS命令，它能夠指定元素最小也不能小於某個寬度，這樣就能保證排版一直正確。總體最窄770px，最寬1024px，也就 是說窗口小於770xp就出底部滾動條，若是大於1024px自動屏幕居中。IE不認得min-這個定義，但實際上它把正常的width和height當 做有min的狀況來使。這樣，若是隻用寬度和高度，正常的瀏覽器裏這兩個值就不會變，若是隻用min-width和min-height的話，IE下面根 本等於沒有設置寬度和高度。
CSS這樣設計：
#container{
 min-width: 600px;
 width:expression(document.body.clientWidth < 600? "600px": "auto" );
 }
第一個min-width是正常的；但第2行的width使用了Javascrīpt，這隻有IE才認得，這也會讓你的HTML文檔不太正規。它實際上經過Javascrīpt的判斷來實現最小寬度。
 一樣的辦法也能夠爲IE實現最大寬度：
#container
 {
 min-width: 600px;
 max-width: 1200px;
 width:expression(document.body.clientWidth < 600? "600px" : document.body.clientWidth > 1200? 」1200px「 : 」auto";
 }

 七、FF: 支持 !important, IE 則忽略,
可用 !important （例：height:30px!important; height:26px;）爲 FF 特別設置樣式
div 的垂直居中問題: vertical-align:middle; 將行距增長到和整個DIV同樣高 line-height:200px; 而後插入文字，就垂直居中了。缺點是要控制內容不要換行
cursor: pointer 能夠同時在 IE FF 中顯示遊標手指狀， hand 僅 IE 能夠
FF: 連接加邊框和背景色，需設置 display: block, 同時設置 float: left 保證不換行（背景圖片須要設置 float: left ）。參照 menubar, 給 a 和 menubar 設置高度是爲了不底邊顯示錯位, 若不設 height, 能夠在 menubar 中插入一個空格
 在FF和IE中的BOX模型解釋不一致致使相差2px解決方法：
div{margin:30px!important;margin:28px;}
注意這兩個margin的順序必定不能寫反，據阿捷的說法!important這個屬性IE不能識別，但別的瀏覽器能夠識別。因此在IE下其實解釋成這樣：
div css xhtml xml Example Source Code Example Source Code
 div{maring:30px;margin:28px}
重複定義的話按照最後一個來執行，因此不能夠只寫margin:XXpx!important;

在Firefox/Mozilla 瀏覽器中，對象的實際寬度= (margin-left) + (border-left-width) + (padding- left) + width + (padding-right) + (border-right-width) + (margin-right)；而在IE/Opera瀏覽器中，對象的實際寬度 = (margin-left) + width + (margin-right)。
##########################################################
五招解決Div+CSS網頁兼容IE和FF使用div+css建站的朋友必定都知道CSS兼容的問題。由其是初學者在IE環境下好不容易寫出了一個像模像 樣的網站來，一拿到FF下就變樣了。因此在這裏建議新手寫代碼時切忌要在IE和FF兩個環境下去測試。今天教你們五招方法徹底能夠解決瀏覽器兼容問題。 
 　　這裏你們要知道CSS不兼容的緣由是由於各瀏覽器給CSS默認屬性值不同形成的。
 　　第一招：給經常使用CSS規定屬性值。
body,div,dl,dt,dd,ol,h1,h2,h3,h4,h5,h6,form,input,p,th,td{margin:0;padding:0;}
 img{border:0px;}
 ul {margin:0px;padding:0px;}/
 ul li {list-style:none;}
上面的建站經常使用代碼就相是格式化CSS樣式，讓各瀏覽器按照咱們設置的屬性值渲染網頁
 　　第二招：IE和FF下對象居中問題
IE下你們應該知道只要設置body{text-align:center;}這樣就能夠居中顯示。
 可是這樣的方法在FF不行的。這裏就須要給修改爲body:{text-align:center;margin:0px auto;}Margin的意思就是上下距離爲0像素，左右爲自動。因此FF就會居中顯示。
 　　第三招：垂直居中（僅只用於一行）
 好比說一個高30px的div，問題默認是會顯示在左上角，若是想垂直居中對其能夠加個line- height:30px;樣式。若是你想讓他居下方則在修改line-height:30px;數值越大越局下，爲了防止撐破層，還須要再給一個樣式 overflow:hidden;(超出的部分不顯示)
　　第四招：給每個塊對象設置三個樣式
width:**px;height:**px;overflow:hidden;即使高、寬是屬性值是自動那麼也須要去設置這三個樣式。目的就是解決瀏覽器默認值的問題。
 第五招：針對IE六、IE七、FF的css樣式(這一招在特殊狀況下常常用到)
原來建設網站常用!important來設置優先權，但有了IE7以後就不行了。下面給你們個能夠解決IE六、IE七、FF各個CSS優先權的方法
#1 { color: #333; } /* FF環境 */ 
 * html #1 { color: #666; } /* IE6環境 */ 
 *+html #1 { color: #999; } /* IE7環境 */ 
上面的書寫順序必定不能去改變。
 這樣子網頁在FF下顯示#333，IE6下顯示#666，IE7下顯示#999;
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。