DIV＋CSS瀏覽器兼容性解決方法

1.DIV＋CSS網頁佈局這是一種趨勢,我也開始順應這股趨勢了,不過在使用DIV＋CSS網站設計的時候，應該注意css樣式兼容不一樣瀏覽器問題，特別是對徹底使用DIV+CSS設計的網頁，就應該更注意IE6 IE7FF對CSS樣式的兼容，否則，你的網頁可能亂的一塌糊塗！         我常常被這些東西整的焦頭爛額,因而呼在網上找了些資料,加上本身的理解和這些日子的經驗,整理了一些資料,其中有一些我還沒用到的和還不能理解的,就直接從別的地方給粘了過來,不知道有沒有錯誤,等我之後用到的時候慢慢改吧,但願對你們有點幫助!         什麼是瀏覽器兼容：當咱們使用不一樣的瀏覽器（Firefox IE7IE6）訪問同一個網站，或者頁面的時候，會出現一些不兼容的問題，在這種瀏覽器下顯示正常，在另外一種下就亂了，咱們在編寫CSS的時候會很惱火，剛修復了這個瀏覽器的問題，結果另一個瀏覽器卻出了新問題。 好吧，我服了行吧，那我就利用大家的不兼容各寫一段css,讓他們各執行各的，這下總該你沒脾氣了吧，呵呵。好了，言歸正傳1、!important (功能有限) 隨着IE7對!important的支持, !important方法如今只針對IE6的兼容.(注意寫法.記得該聲明位置須要提早.) 例如:#example { width: 100px !important; width: 200px; } 2、CSS HACK的方法(新手能夠看看，高手就當路過吧)首先須要知道的是：全部瀏覽器 通用 height: 100px; IE6 專用 _height: 100px; IE7 專用 *+height: 100px;IE六、IE7 共用 *height: 100px;IE七、FF 共用 height: 100px !important;例如： #example { height:100px; } * html #example { height:200px; } *+html #example { height:300px; }        下面的這種方法比較簡單舉幾個例子：一、IE6 - IE7+FF#example { height:100px; _height:200px; }其實這個用上面說的第一種方法也能夠#example { height:100px !important; height:200px; } 二、IE6+IE7 - FF#example { height:100px; *height:200px; } 三、IE6+FF - IE7#example { height:100px; *+height:200px; } 四、 IE6 IE7 FF 各不相同 #example { height:100px; _height:200px; *+height:300px; }或：#example { height:100px; *height:300px; _height:200px; } 須要注意的是，代碼的順序必定不能顛倒了，要不又前功盡棄了。由於瀏覽器在解釋程序的時候，若是重名的話，會用後面的覆蓋前面的，就象給變量賦值一個道理，因此咱們把通用的放前面，越專用的越放後面解釋一下4的代碼：讀代碼的時候，第一行height:100px; 你們都通用，IE6 IE7 FF 都顯示100px到了第二行*height:300px; FF不認識這個屬性，IE6 IE7都認，因此FF還顯示100px，而IE6IE7把第一行獲得的height屬性給覆蓋了，都顯示300px到了第三行 _height:200px;只有IE6認識，因此IE6就又覆蓋了在第二行獲得的height,最終顯示200px這樣，三個瀏覽器都有本身的 height屬性了，各玩各的去吧這樣說要是你還不明白，要麼你去撞牆，要麼我去!不過仍是你去比較好。哦，差點忘了說了：*+html 對IE7的兼容 必須保證HTML頂部有以下聲明：  3、使用IE專用的條件註釋 貌似要編三套css，我還沒用過，先粘過來再說IE的if條件Hack1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 注:gt = Great Then 大於> = > 大於號lt = Less Then 小於< = < 小於號gte = Great Then or Equal 大於或等於lte = Less Then or Equal 小於或等於 4、css filter的辦法(據做者稱是從國外某經典網站翻譯過來的說)新建一個css樣式以下：#item { width: 200px; height: 200px; background: red;}新建一個div,並使用前面定義的css的樣式： some text here 在 body表現這裏加入lang屬性,中文爲zh： 如今對div元素再定義一個樣式：*:lang(en) #item{ background:green !important;}這樣作是爲了用!important覆蓋原來的css樣式,因爲:lang選擇器ie7.0並不支持,因此對這句話不會有任何做用,因而也達到了ie6.0下一樣的效果,可是很不幸地的是,safari一樣不支持此屬性,因此須要加入如下css樣式： #item:empty { background: green !important}:empty選擇器爲css3的規範,儘管safari並不支持此規範,可是仍是會選擇此元素,無論是否此元素存在,如今綠色會如今在除ie各版本之外的瀏覽器上。 5、FLOAT閉合（clearing float）　　 網頁在某些瀏覽器上顯示錯位不少時候都是由於使用了float浮動而沒有真正閉合，這也是div沒法自適應高度的一個緣由。若是父div沒有設float而其子div卻設了float的話,父div沒法包住整個子DIV，這種狀況通常出如今一個父DIV下包含多個子DIV。解決辦法：１、給父DIV也設上 float(不要罵我，我知道是廢話) 二、在全部子DIV後新加一個空DIV好比：.parent{width:100px;}.son1{float:left;width:20px;}.son2{float:left;width:80px;}.clear{clear:both;margin:0;parding0;height:0px;font- size:0px;}                  其實.clear{clear:both;}這樣定義一下就好了，如今你們好像都是這麼幹的，呵呵，我也是這麼作的，但我總有種擔憂，擔憂之後瀏覽器出新版本的話這個空DIV是否是會有高度？因此我儘可能寫的細一點，把高度，行高，字體什麼的都定爲0，但願個人擔憂是多餘的。 三、萬能 float 閉合將如下代碼加入Global CSS 中,給須要閉合的div加上 class=」clearfix」 便可,屢試不爽. 代碼::after（僞對象）,設置在對象後發生的內容，一般和content配合使用，IE不支持此僞對象，非Ie瀏覽器支持，因此並不影響到 IE/WIN瀏覽器。這種的最麻煩。 四、overflow:auto（剛看到的，還挺有意思）只要在父DIV的CSS中加上 overflow:auto就搞定。舉例：.parent{width:100px;overflow:auto}.son1{float:left;width:20px;}.son2{float:left;width:80px;}            做者原話：原理是，外圍元素之因此不能很好的延伸，問題出在了overflow上，由於overflow不可見（見W3C的解釋）。如今只要將給外圍元素添加一個「overflow:auto」，就能夠解決問題，結果是除了IE，真的能夠解決。下來就要解決IE的問題了，再加上「_height:1%」，這個問題就徹底解決了。我試了一下，其實不加"_height:1%「在IE下也行，留着吧。 6、須要注意的一些兼容細節 1, FF下給 div 設置 padding 後會致使 width 和 height 增長(DIV的實際寬度=DIV寬+Padding),但IE不會. 解決辦法：給DIV設定IE、FF兩個寬度，在IE的寬度前加上IE特有標記" * "號。 2, 頁面居中問題. body {TEXT-ALIGN: center;} 在IE下足夠了，但FF下失效。解決辦法：加上"MARGIN-RIGHT: auto; MARGIN-LEFT: auto; " 3,有的時候在IE6上看見一些奇怪的間隙，可咱們高度明明設好了呀。 解決辦法：試試在有空隙的DIV上加上"font-size:0px;" 4,關於手形光標. cursor: pointer. 而hand 只適用於 IE. 5, 浮動IE6產生的雙倍距離 #box{ float:left; width:100px; margin:0 0 0 100px;}這種狀況之下IE6會產生200px的距離 解決辦法：加上display:inline，使浮動忽略這裏細說一下block,inline兩個元素,Block元素的特色是:老是在新行上開始,高度,寬度,行高,邊距均可以控制(塊元素);Inline元素的特色是:和其餘元素在同一行上,…不可控制(內嵌元素); #box{ display:block; //能夠爲內嵌元素模擬爲塊元素display:inline; //實現同一行排列的的效果 6 頁面的最小寬度min-width是個很是方便的CSS命令，它能夠指定元素最小也不能小於某個寬度，這樣就能保證排版一直正確。但IE不認得min-這個定義，但實際上它把正常的width和height看成有min的狀況來使。這樣問題就大了，若是隻用寬度和高度，正常的瀏覽器裏這兩個值就不會變，若是隻用min-width和min-height的話，IE下面根本等於沒有設置寬度和高度。好比要設置背景圖片，這個寬度是比較重要的。 解決辦法：爲了讓這一命令在IE上也能用，能夠把一個 放到   標籤下，而後爲div指定一個類： 而後CSS這樣設計：#container{ min-width: 600px; width:e-xpression(document.body.clientWidth < 600? 「600px」: 「auto」 ); } 第一個min-width是正常的；但第2行的width使用了Javascript，這隻有IE才認得，這也會讓你的HTML文檔不太正規。它實際上經過Javascript的判斷來實現最小寬度。 七、UL和FORM標籤的padding與margin   ul標籤在FF中默認是有padding值的,而在IE中只有margin默認有值。FORM標籤在IE中,將會自動margin一些邊距,而在FF中 margin則是0；      解決辦法：css中首先都使用這樣的樣式ul,form{margin:0;padding:0;}給定義死了,後面就不會爲這個頭疼了. 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代碼    針對上面這段代碼，下面說一下個人理解： 第1、只要right定義了width屬性，在FF下絕對就會兩行顯示 第2、兩個width都定義爲百分比的話，就算都爲100%在IE下也會一行顯示。因此上面那句所謂「這句是關鍵」根本沒用，不加也在一行，除非你 width定義的是數值才用得上。因此說上面這段代碼其實用處不大，至少在FF下不行。其實只要只定義left的width就好了，right不定義 width就無論在IE仍是FF下都能成功，但這樣的話父DIVBOX並無真正的包含LEFT和RIGHT兩子DIV,能夠用我上面說的第5種辦法解決。最簡單的辦法就是在RIGHT中加上float:left就OK了， 真磨嘰！9,截字省略號 .hh { -o-text-overflow:ellipsis; text-overflow:ellipsis;white-space:nowrap; overflow:hidden;} 這個是在越出長度後會自行的截掉多出部分的文字，並以省略號結尾。技術是好技術，不少人都喜歡亂用，但注意Firefox並不支持。 2. 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; width: 80px; } </style> 2, IE6/IE77對FireFox <from 針對firefox ie6 ie7的css樣式> *+html 與 *html 是IE特有的標籤, firefox 暫不支持.而*+html 又爲 IE7特有標籤. 代碼: <style> #wrapper { width: 120px; } 80後粉絲網　80fans.com *html #wrapper { width: 80px;} *+html #wrapper { width: 60px;} </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> .clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; } .clearfix { display:inline-block; } .clearfix {display:block;} </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.貼上代碼: 兼容代碼:兼容最推薦的模式。 .submitbutton { float:left; width: 40px; height: 57px; margin-top: 24px; margin-right: 12px; } *html .submitbutton { margin-top: 21px; 80後粉絲網　80fans.com } *+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; } * html #1 { color: #666; } *+html #1 { color: #999; } 那麼在firefox下字體顏色顯示爲#333，IE6下字體顏色顯示爲#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; //使浮動忽略} 80後粉絲網　80fans.com 這裏細說一下block,inline兩個元素,Block元素的特色是:老是在新行上開始,高度,寬度,行高,邊距均可以控制(塊元素);Inline元素的特色是:和其餘元素在同一行上,…不可控制(內嵌元素); #box{ display:block; //能夠爲內嵌元素模擬爲塊元素 display:inline; //實現同一行排列的的效果 diplay: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指定一個類： 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的都是一樣式的.