ie瀏覽器常見的相容性問題

2021-09-23 23:58:18 字數 701 閱讀 2009

1.塊屬性標籤float後,又有橫行的margin情況下,在ie6顯示margin比設定的大問題:常見是ie6中後面的一塊被頂到下一行

解決:在float的標籤樣式控制中加入 display:inline;將其轉化為行內屬性

2.設定較小高度標籤(一般小於10px),在ie6,ie7中高度超出自己設定的高度

解決:給超出高度的標籤設定overflow:hidden;或者設定行高line-height 小於自己設定的高度

注:(這種情況一般出現在設定小圓角背景的標籤裡。出現這個問題的原因是ie8之前的瀏覽器都會給標籤乙個最小預設的行高的高度。即使標籤是空的,這個標籤的高度還是會達到預設的行高)

3.標籤最低高度設定min-height不相容,因為min-height本身就是乙個不相容的css屬性,所以設定min-height時不能很好的被各個瀏覽器相容

解決:如果我們要設定乙個標籤的最小高度200px,需要進行的設定為:

注:在b/s系統前端開發時,有很多情況下我們有這種需求。當內容小於乙個值(如300px)時。容器的高度為300px;當內容高度大於這個值時,容器高度被撐高,而不是出現滾動條。這時候我們就會面臨這個相容性問題。

4.清除浮動:

.clearfix::after 

.clearfix

5.盒模型

element

常見瀏覽器相容性問題

概念 不同的瀏覽器對同一段 解析不同造成瀏覽器顯示效果不同,我們把這樣的問題叫做瀏覽器相容性問題 描述 塊元素float後,又設定了橫向的margin值,在ie6下顯示的margin值比設定的值要大,並且是2倍關係 解決方案 給float的塊元素新增display inline 解決方案 a 給表單...

常見的瀏覽器相容性問題

1.就是ie6雙倍邊距的問題,在使用了float的情況下,不管是向左還是向右都會出現雙倍,最簡單的解決方法就是用display inline 加到 css裡面去。2.文字本身的大小不相容。同樣是font size 14px的宋體文字,在不同瀏覽器下佔的空間是不一樣的,ie下實際佔高16px,下留白3...

瀏覽器常見的相容性問題

1.瀏覽器相容問題一 不同瀏覽器的標籤預設的margin和padding不同。解決辦法 2.瀏覽器相容問題二 ie6雙邊距 bug,塊屬性標籤 float 後,又有橫行的 margin 情況下,在 ie6顯示 margin 比設定的大。3.瀏覽器相容問題三 設定較小高度標籤 一般小於 10px 在i...