有關css樣式解決瀏覽器相容

1樓：

《轉》:

1.ie8下相容問題，這個最好處理，轉化成ie7相容就可以。在頭部加如下一段**，然後只要在ie7下相容了，ie8下面也就相容了

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;如下

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學熟再說。

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

2樓：meome繪畫