瀏覽器相容性問題歸納整理

2021-07-05 05:12:46 字數 2744 閱讀 5382

1.   ie6裡面的豎向滾動條失效

ie6裡面如果設定元素為橫向滾動條隱藏,豎向滾動條顯示,如果改原始內有元素設定position:relative;或者position:absolute;樣式,那麼ie6裡面的豎向滾動條就會失效。解決辦法:設定該元素為position:relative;top:0;left:0;即可解決此bug!

2.    ie6,ie7下設定overflow:auto下滾動條不起作用

ie6,ie7下設定overflow:auto下滾動條出來了但是滾動條不起任何作用,但在火狐,ie8,ie9,谷歌等瀏覽器下正常顯示。通過查詢終於找到原因,只需要加乙個position:relative;屬性就能解決問題!

3.    ie6下 bug overflow:hidden無效解決辦法如下:

產生原因:當父元素的直接子元素或者下級子元素的樣式擁有position:relative屬性時,父元素的overflow:hidden屬性就會失效。

解決辦法:我們在ie 6內發現子元素會超出父元素設定的高度,即使父元素設定了overflow:hidden。

解決這個bug很簡單,在父元素中使用position:relative;即可解決該bug。

4.ie6

下div

邊框顯示不完整有殘缺

把乙個div的border設定為border:1px solid #ccc;的時候,這個div作為乙個容器,容器裡面的內容設定了float屬性。在ie6下就一直會有問題,容器的邊框在瀏覽的 時候總有殘缺,顯示不完整,感覺若隱若現的。但是把滑鼠放上去選擇下,晃動一下就沒有問題,馬上就顯示完整而沒問題了。在ie7和firefox下都沒有問題, 最後終於找到原因,

1.在父元素中加入height:1%

2.給父元素設定乙個寬度或高度

3.給父元素設定乙個背景色.

5.    列表中li標籤設定margin在ie6和ie7中第乙個行失效的解決方法

靜態**如下:

css**如下:

.row2-left

.row2-lefth1

.row2-leftul

.row2-left ul li

解決方法一:

在ul中加上屬性width:240px;

解決方法二:

把li標籤中的margin-left:10px;移到ul標籤中。

6.    3

畫素bug

著名的3畫素bug。你可以給img的css設定display: block;用來去除div下邊莫名多出來的3px的像padding-bottom的東西。注:vertical-align: middle; 亦可

7.    ie6/ie7之浮動元素最後乙個字母重複bug

解決方法:

(一)  

在我們的浮動元素span上新增position: relative;

(二)  將html注釋換成ie注釋    或 注釋不放置於 2 個浮動的區塊之間。

(三)  在第二個容器後面加乙個或者多個

來解決8.    **內內容超出用省略號顯示

1. table-layout:fixed 

由於table-layout的預設值是auto,即table的寬高將取決於其內容的多寡,如果內容的體積無法估測,那麼最終**的呈現形式也無法保證了,fixed一下就好了。(注意:此樣式是關鍵)

2. white-space:nowrap 

是為了保證無論單元格(td)中文字內容有多少,都不會自動換行,此時多餘的內容會在水平方向撐破單元格。

3. overflow:hidden 

隱藏超出單元格的部分。

4. text-overflow:ellipsis 

將被隱藏的那部分用省略號代替。

9.    

css hack

.test

10.不同瀏覽器的標籤預設的外補丁和內補丁不同

解決方案:css裡    *

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

出現這個問題的原因是ie8之前的瀏覽器都會給標籤乙個最小預設的行高的高度。即使你的標籤是空的,這個標籤的高度還是會達到預設的行高。

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

12.標籤最低高度設定min-height不相容

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

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

瀏覽器相容性問題整理

一 不同瀏覽器的標籤預設的外邊距和內邊距不同。問題症狀 隨便寫幾個標籤,不加樣式控制的情況下,各自的margin 和padding差異較大。解決方案 這個是最常見的也是最易解決的乙個瀏覽器相容性問題,幾乎所有的css檔案開頭都會用萬用字元 來設定各個標籤的內外邊距為0。二 塊屬性標籤float後,又...

瀏覽器相容性問題整理

一 ie8 下無法識別後續以innerhtml方式新增的自定義標籤 例如要建立乙個自定義標籤thetag,事先已document.createelement thetag 但後續通過innerhtml的方式新增的該元素,ie8 是不認的。測試 如下 subject str 全部 subject se...

瀏覽器相容性問題

苦惱的區別 1.image repeat 在火狐裡比較正常,可是在ie中一直repeat.背景是乙個關閉的x號,div設定的backgourn image url xx 結果在ie中卻不行,最後找到原因是ie中要顯式的寫上image repeat norepeat這屬性,還有好多的差異,明天 去了 ...