瀏覽器相容

2021-08-29 03:05:45 字數 1829 閱讀 9345

1.瀏覽器谷歌的最小字型大小12px,小於12px的設定不起作用

(1)支援小於12px的字型大小的瀏覽器包括:ie、火狐、qq的相容模式,360瀏覽器(極速和安全)的相容模式,世界之窗的ie核心模式、uc瀏覽器的ie核心等

(2)、不支援小於12px的瀏覽器包括:谷歌、qq的極速模式,360瀏覽器(極速和安全)的極速模式,世界之窗的ie核心模式

總之是-webkit核心的瀏覽器不支援小於12px字型大小的設定。

要想-webkit核心的瀏覽器支援小於12px的字型大小的方法:利用css3的縮放來解決:

.chrome_adjust
2.background-size的相容處理

問題描述:background-size不支援ie8。

方式二、不用多倍圖的

方式三、給兩個,乙個一倍圖的banner1.jpg,另乙個多倍圖的banner.jpg。

.banner

:root .banner

可以支援ie8以下的瀏覽器

3.透明度(opacity)的使用

相容:opacity在ie上有相容問題,利用濾鏡解決

方法:(1).class這樣寫的話就沒有相容問題了

影響範圍:其子元素的透明度都受影響。

與rgba()的區別:不會影響子元素的透明度,只用作背景色。瀏覽器支援ie9以及以上。

相容性解決:利用濾鏡filter: progid:dximagetransform.microsoft.gradient(startcolorstr=#88000000, endcolorstr=#88000000); (不推薦使用,因為使用了效果也不好,並且浪費資源)。

4.first-child,last-child,nth-child()的相容處理

相容性:前者ie8以及以上,後兩者ie9以及以上的版本

first-child:expression_r(this.previoussibling==null?)是為了ie8以下的瀏覽器的支援

last-child:expression_r(this.nextsibling==null?)

nth-child()的相容性利用利用jquery來實現,如果是關於margin的,可以利用父元素的margin的負值來解決

5.關於css3的相容性處理

現在除了在屬性簽加不同核心的字首,暫時沒有別的好的辦法處理,但是需要注意一點在低版本的瀏覽器可以沒有絢爛的效果但不能影響其他的布局,在高版本的瀏覽器有比較好的效果。

6.多行省略

用css實現——只有在谷歌瀏覽器有效果,其他的瀏覽器都沒有效果

.text
用js實現

相容多種瀏覽器的,多行文字多餘顯示省略號相容多種瀏覽器的,多行文字多餘顯示省略號相容多種瀏覽器的,多行文字多餘顯示省略號

其他方式:多行文字溢位顯示省略號(…)全攻略

7.css3 瀏覽器字首

transform:rotate(7deg);

-o-transform:rotate(7deg); // opera

-ms-transform:rotate(7deg); // ie

-moz-transform:rotate(7deg); // firefox

-webkit-transform:rotate(7deg); // chrome

8.windows系統與ios系統谷歌瀏覽器的區別

對於頁面的數字元素,要設定他們的font-family,不然會預設清除樣式設定的中文字型,解析不同,他們所占用的寬度不同,會對布局造成影響

瀏覽器相容

瀏覽器相容問題一 不同瀏覽器的標籤預設的外補丁和內補丁不同 問題症狀 隨便寫幾個標籤,不加樣式控制的情況下,各自的margin 和padding差異較大。碰到頻率 100 解決方案 css裡 備註 這個是最常見的也是最易解決的乙個瀏覽器相容性問題,幾乎所有的css檔案開頭都會用萬用字元 來設定各個標...

瀏覽器相容

1 css bug css樣式在各瀏覽器中解析不一致的情況,或者說 css樣式在瀏覽器中不能正確顯示的問題稱為 css bug.2 css hack css中,hack 是指一種相容 css在不同瀏覽器中正確顯示的技巧方法,因為它們都屬於個人對 css 的非官方的修改,或非官方的。有些人更喜歡使用 ...

瀏覽器相容

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