DIV+CSS解決IE6,IE7,IE8,FF相容問題

來源:互聯網
上載者:User

1.ie8下相容問題,這個最好處理,轉化成ie7相容就可以。在頭部加如下一段代碼,然後只要在IE7下相容了,IE8下面也就相容了
<meta http-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背景填色或填圖片的時候,會出現背景 斷開或差一小塊。這種相容出現的不太多,我做到現在,只遇到過兩次,方法是在出現相容的DIV的CSS中寫一個display:block,或其它屬性, 中文什麼意思我不知道,我英語差,但能達到想要的效果,6 e" Z+ e% |8 G# |
4.很多朋友DIV+CSS的時候,會出現,在IE的幾個瀏覽器下都好了,但是在FF出問題了,用!important又會把IE7做的不相容,很頭疼,在想,有沒有什麼方法只對FF下進行操做,我用過這 個方法,感覺得是百試不爽,就是在屬性前面加符號如:*、&,¥,#,@,—,+,加過符號的屬性只有IE的瀏覽器才識別,而FF不識別,方法如 下(注意有符號的屬性和沒符號的屬性的順序)
height:100px;/*FF下顯示100的高*/
+height:120px;/*IE678下顯示120高*/

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;/*FF裡顯示的紅色*/
+background:blue !important;/*IE7下面顯示的藍色*/
+background:green;/*IE6下面顯示的綠色*/

在這裡,我想說一下,雖然相容給你帶來很多鬱悶,讓人心煩,但同時,在你做多了後,你會發現,相容有時候會滿足你很多不好達到的效果,就像最後一 個,要做那種效果,不用相容的方法,那你就JS去吧,JS還得想想FF和IE下的不同,當然,JS的相容,我也不會,我沒去研究過。以後的事,先把CSS+DIV學熟再說。

多做,做練,始終把盒子模型放在心中,才會熟練,才會運用自如,才會在做的時候,自然而然就知道哪裡會有相容問題,直接在測試前就解決掉那些最常見的相容問題。

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.