DIV+CSS解決IE6,IE7,IE8,F(xiàn)F兼容問題行之有效的辦法
本文和大家重點討論一下DIV+CSS如何解決IE6,IE7,IE8,F(xiàn)F兼容問題,主要從七個方面來向大家講解,相信本文介紹一定會讓你有所收獲。
DIV+CSS解決IE6,IE7,IE8,F(xiàn)F兼容問題
1.IE8下兼容問題,這個最好處理,轉(zhuǎn)化成IE7兼容就可以。在頭部加如下一段代碼,然后只要在IE7下兼容了,IE8下面也就兼容了:
- <metahttp-equivmetahttp-equiv="x-ua-compatible"content="IE=7"/>
2.flaot浮動造成IE6下面雙倍邊距問題,這個最常見,也最好處理,!important解決,比如
margin-left:10px!important;/*IE7,IE8,FF下是10PX*/;
margin-left:5px;/*IE6下屬性寫的是5PX,但在顯示出來的是10px
3.清除塊display,這個可以解決浮動造成的塊,造成塊后,當DIV背景填色或填圖片的時候,會出現(xiàn)背景斷開或差一小塊。這種兼容出現(xiàn)的不太多,我做到現(xiàn)在,只遇到過兩次,方法是在出現(xiàn)兼容的DIV的CSS中寫一個display:block,或其它屬性,中文什么意思我不知道,我英語差,但能達到想要的效果,6e"Z+e%|8G#|
4.很多朋友DIV+CSS的時候,會出現(xiàn),在IE的幾個瀏覽器下都好了,但是在FF出問題了,用!important又會把IE7做的不兼容,很頭疼,在想,有沒有什么方法只對FF下進行操做,我用過這個方法,感覺得是百試不爽,就是在屬性前面加符號如:*、&,¥,#,@,—,+,加過符號的屬性只有IE的瀏覽器才識別,而FF不識別,方法如下(注意有符號的屬性和沒符號的屬性的順序)
height:100px;/*FF下顯示100的高*/
+height:120px;/*IE678下顯示120高*/
5.有時候,會在布局的時候,發(fā)現(xiàn),有一個DIV浮動了,接下來的一個DIV本來是要在下面顯示的,結(jié)果跑上面去了,這種情況一般在FF下面會出現(xiàn),解決的辦法就是清除一下浮動,在設置過浮動的那個DIV下面加一個DIV,CSS面寫個clear:both;如下
- <divstyledivstyle="float:left;height:100px;width:500px;">
- <divstyledivstyle="clear:both;">
- <divstyledivstyle="height:100px;width=300px">
6.再就是居中問題,這個問題在新手身上很多,主要原因是對盒子模型不夠理解,沒熟記盒子模型,如果發(fā)現(xiàn)你的頁面沒有局中,我現(xiàn)在知道的,有這幾個原因:
1.一個是沒盒子,就是BODY后的一個大DIV把所有DIV裝起來的那個,你沒寫。
2.就是你寫了,但是寬度沒用絕對寬度:而是用一個相對的寬度,想局中,必須用絕對寬度。-
7.擴展:如果我想在設計的時候,實現(xiàn)IE6,IE7,FF下出現(xiàn)三種不同的效果,比如IE6下背景紅色,IE7下藍色FF下綠色,這里,我自己試過,可以,用兼容的方法(注意順序,可以好好理解一下)。
7L&t-o7k-a1I
background:red;/*FF里顯示的紅色*/
+background:blue!important;/*IE7下面顯示的藍色*/
+background:green;/*IE6下面顯示的綠色*/
【編輯推薦】
- 解決IE6、IE7、Firefox兼容性最簡單方法揭秘
- 探究IE8與IE7具體功能中窗口功能按鈕的變化
- IE6 IE7 IE8三個版本的CSS兼容速查手冊
- 探秘IE8 JavaScript功能超乎想象
- 技術前沿 一段JS代碼輕松解決IE6-IE8的兼容性問題