CSS常見相容問題解決方案 持續更新

2021-07-27 13:02:23 字數 2436 閱讀 9256

1.ie6雙邊距問題:在ie6下,如果對元素設定了浮動,同時又設定了margin-left或margin-right,margin值會加倍。例如:

html:

css:

.mydiv

firefox預覽結果:

ie6預覽結果:

很明顯的,在ie6中,margin-left:30px的邊距翻倍成60px了。

解決問題:

設定display:inline;

2.上下margin重合:margin是個有點特殊的樣式,相鄰的margin-left和margin-right是不會重合的,但相鄰的margin-top和margin-bottom會產生重合。不管ie還是firefox都存在這問題。例如:

html:

css:

.topdiv

.bottomdiv

我們對上面的div設定了25px的下邊距,對下方的div設定了50px的上邊距。為了便於觀察,這裡將div的高度都設為100px。

瀏覽器預覽結果:

可見,結果不是預期的上下div拉開75px的距離,而是拉開了半個div高度(50px)的距離。

解決問題:

統一使用margin-top或者margin-bottom,不要混合使用。這並不是技術上的必需,但卻是個良好的習慣。

3.超連結訪問後hover樣式不出現:

有時候我們同時設定了a:visited和a:hover樣式,但一旦超連結訪問後,hover的樣式就不再出現,這是怎麼回事呢?是因為將樣式順序放錯了,調整為先a:visited再a:hover。關於a標籤的四種狀態的排序問題,有個簡單好記的原則,叫做love hate原則,即i(link)ov(visited)e h(hover)a(active)e。

4.高度不適應問題:高度不適應指的是,當內層物件的高度發生變化時,外層物件的高度不能自動擴充套件,特別是當內層物件使用padding或margin之後。高度不適應問題不是ie的專利,firefox也出現這種問題。先來看看例子:

html:

p物件中的內容

css:

#box

#box p

看看**做了什麼,除了背景之外,#box僅是乙個沒有任何樣式的div,而p加了2個關鍵屬性margin-top:20px,margin-bottom:20px;,即上下外邊距都是20px,p物件的高度應當是20+20+文字高度,即應當在40px以上。理論上#box這個div的高度會被擠開,至少達到40px以上。我們看看預覽效果。

瀏覽器預覽結果:

似乎並非預想的結果,看上去帶背景的#box還是和文字一樣高,並沒有超過40px,這是為什麼呢?為了驗證一些事情,我們在html前後加上乙個帶背景的div。

修改後的html:

upp物件中的內容

down

修改後的css:

#box

#box p

.box2

再來看下預覽結果:

瀏覽器預覽結果:

可以看到上下兩個div並沒有緊貼#box物件,而是有一定的間距。測量下會發現,這個間距剛好是p物件的margin上下各20px。這個測驗證明了乙個問題,就是#box物件並沒有因其中的p物件的margin變化而改變自身的高度。而p物件的margin高度的確在整個頁面中佔據了一定的空間。相當於#box不動,而p把自己撐到了#box外面去了。

無論是ie還是firefox,測試中都會發現這個問題。

解決問題:

經過一些測試,我們發現對#box定義padding或者border,就會迫使#box重新計算自己的高度,從而使自身能夠適應內容的高度變化。但如果強制給物件設定了邊距又會帶來位移。我們需要找到乙個新方法,不再從物件本身的屬性入手,而是在物件的內部進行修復。我們可以在物件上下增加2個高度為0的空div,並強制內容不顯示。

修改後的html:

upp物件中的內容

down

這2個div只充當了佔位符的角色,而不發生實際的佔位。而對它的外層物件而言,由於其中多了一些邏輯佔位物件使得它會重新計算高度,從而實現高度的自適應。

預覽效果:

持續更新……

el table各種樣式相容問題解決方案

1.邊框消失 被固定欄遮擋 上 下 左 右 2.調整邊距後問題 線條偏差錯位 標題與內容不對齊 右側固定欄多出內容 需要設定自適應寬度 3.操作欄按鈕高度不夠 行間距是padding 6px 0 按鈕內邊距是 7px 15px 設定高優先,以覆蓋內聯樣式 el table el table fixe...

常見的相容性問題解決方案

1.區別ie和非ie瀏覽器 demo1 2.區別ie6,ie7,ie8,ff 區別符號 9 示例 demo2 說明 因為ie系列瀏覽器可讀 9 而ie6和ie7可讀 公尺字型大小 另外ie6可辨識 底線 因此可以依照順序寫下來,就會讓瀏 覽器正確的讀取到自己看得懂得css語法,所以就可以有效區分ie...

常見問題解決方案

mkdir opt redis cd opt redisvim redis.conf 是否持久化 設定密碼 requirepass admindocker pull redisdocker run p 6379 6379 d name redis 6379 v opt redis data data...