瀏覽器相容及解決方法

2021-09-24 12:20:26 字數 1289 閱讀 8067

以後堅持一日一更,和大家分享我每天學習的成果及經驗,讓想要學習的小夥伴少走彎路。

一、滑鼠樣式

ff不支援hand,使用cursor:pointer相容所有瀏覽器

二、innertext

三、透明度

filter:alpha(opacity=0~100)相容ie8及以下

opacity:0~1相容主流瀏覽器

四、width和padding

css標準:width為內容的寬度,也就是說: 層的寬度 = width + padding(left and right) + border-width;

ie則把width作為整個層的寬度: 內容的寬度 = width - padding - border-width;

五、ul和ol

ie中設定margin:0就可以去掉列表的上下左右縮排和前面的小圓點

ff中設定margin:0;padding:0;list-style:none;才能去掉上下左右縮排及小圓點

六、元素水平居中

ff:margin:0 auto;

ie:text-align:center;

tansform: translate3d(-50%, 0, 0);相容

七、元素垂直居中

vertical-align:middle;將行距增加到和整個div一樣高:

line-height:200px;然後插入文字,就垂直居中了。缺點是要控制內容不要換行

八、margin加倍問題

設定為float的div在ie下設定的margin會加倍。這是乙個ie6存在的bug。解決方案是在這個div裡面加上display:inline;

margin

:5px;

/*ie下理解為10px*/

display

:inline;

/*ie下再理解為5px*/

九、ie中寬和高

ie不認得min-這個定義,但實際上它把正常的width和height當作有min的情況來使。這樣問題就大了,如果只用寬度和高度,正常的瀏覽器裡這兩個值就不會變,如果只用min-width和min-height的話,ie下面根本等於沒有設定寬度和高度

#box

html>body #box

瀏覽器相容問題及解決方法

所謂的瀏覽器相容性問題,是指因為不同的瀏覽器對同一段 有不同的解析,造成頁面顯示效果不統一的情況。在大多數情況下,我們的需求是,無論使用者用什麼瀏覽器來檢視我們的 或者是登陸我們的系統,都應該是統一的顯示效果。所以瀏覽器的相容性問題是我們前端開發人員經常會碰到和必須要解決的問題。瀏覽器相容問題一 不...

瀏覽器相容問題及解決方法

瀏覽器相容應該是每個前端開發人員都會遇到並且解決的問題。主要是各大瀏覽器對網頁的解析有一定的出入,所以既然無可避免,那麼我就整理乙份關於瀏覽器相容的資料。那麼前提我們要對各大瀏覽器的核心有一定的了解 trident核心 ie,maxthon,tt gecko核心 netcapes6及以上版本,fir...

瀏覽器相容問題及解決方法

瀏覽器相容應該是每個前端開發人員都會遇到並且解決的問題。主要是各大瀏覽器對網頁的解析有一定的出入,所以既然無可避免,那麼我就整理乙份關於瀏覽器相容的資料。那麼前提我們要對各大瀏覽器的核心有一定的了解 trident核心 ie,maxthon,tt gecko核心 netcapes6及以上版本,fir...