web前端遇到的各種瀏覽器不相容與解決方案

2021-08-27 12:37:36 字數 1653 閱讀 8665

比如我們要將page的背景設定成藍色,以達到所有三欄的背景顏色是藍色的目的,但是我們會發現隨著left center right的向下拉長,而page居然儲存高度不變,問題來了,原因在於page不是float屬性,而我們的page由於要居中,不能設定成float,所以我們應該這樣解決:

</div>

</div>

</div>

再嵌入乙個float left而寬度是100%的div解決之。

④ 萬能float 閉合(非常重要!)

關於 clear float 的原理可參見 [how to clear floats without structural markup],將以下**加入global css 中,給需要閉合的div加上class="clearfix" 即可,屢試不爽。

/* clear fix */

.clearfix:after

.clearfix

/* hide from ie mac */

.clearfix

/* end hide from ie mac */

/* end of clearfix */

或者這樣設定:.hackbox

16. 高度不適應

高度不適應是當內層物件的高度發生變化時外層高度不能自動進行調節,特別是當內層物件使用margin 或padding時。

例: #box

#box p

p物件中的內容</p>

解決技巧:在p物件上下各加2個空的div物件css** 或者為div加上border屬性。

17. ie6下下有空隙產生

解決這個bug的技巧有很多,可以是改變html的排版,或者設定img為display:block 或者設定vertical-align屬性為vertical-align:top/bottom/middle/text-bottom 都可以解決.

18. 對齊文字與文字輸入框

加上 vertical-align:middle;

經驗證,在ie下任一版本都不適用,而ff、opera、safari、chrome均ok!

19. li中內容超過長度後以省略號顯示

此技巧適用與ie、opera、safari、chrom瀏覽器,ff暫不支援。

20. 為什麼web標準中ie無法設定滾動條顏色了

解決辦法是將body換成html

24. form標籤

這個標籤在ie中,將會自動margin一些邊距,而在ff中margin則是0,因此,如果想顯示一致,所以最好在css中指定margin和 padding,針對上面兩個問題,我的css中一般首先都使用這樣的樣式ul,form。

25. 屬性選擇器(這個不能算是相容,是隱藏css的乙個bug)

p[id]{}div[id]{}

這個對於ie6.0和ie6.0以下的版本都隱藏,ff和opera作用.屬性選擇器和子選擇器還是有區別的,子選擇器的範圍從形式來說縮小了,屬性選擇器的範圍比較大,如p[id]中,所有p標籤中有id的都是同樣式的.

26. 為什麼ff下文字無法撐開容器的高度

標準瀏覽器中固定高度值的容器是不會象ie6裡那樣被撐開的,那我又想固定高度,又想能被撐開需要怎樣設定呢?辦法就是去掉height設定min-height:200px; 這裡為了照顧不認識min-height的ie6 可以這樣定義:

easyui form與360瀏覽器的不相容性

之前的系統主要用firefox進行前台測試,偶爾用ie 搜狗,360測試一下,感覺功能一切都正常。結果這幾天給深圳的員工使用時,發現他們都是登入不上,登入時用的是easyui的form控制項,結果一直顯示登入中。我這邊用ff測試過一直都沒問題,發現對方用的是360瀏覽器,結果我也用了乙個360,果然...

web前端常見瀏覽器核心

比較常見瀏覽器核心 四種 trident tra dnt trident核心最慢 ie 以trident 作為核心引擎 字首為 ms。gecko gek 開放源 以c 編寫的網頁排版引擎,是跨平台的 firefox是基於 gecko 開發 presto prest 目前公認 網頁瀏覽速度最快 的瀏覽...

前端人員必須了解的各種瀏覽器

做為乙個前端人員最煩惱的就是各種瀏覽器的相容性問題。從微軟的ie6 ie7 ie8到火狐公司的firefox以及其 他各公司的瀏覽器多多少少存在一定的相容性問題。每次你在寫html的時候是否會感到相當苦惱。以下我們簡單 介紹下目前世界流行的各主流瀏覽器。1 ie瀏覽器 2 火狐瀏覽器 3 360安全...