CSS hack IE常見相容性問題

2021-07-30 14:28:08 字數 1321 閱讀 6281

1、hack是什麼？

hack是基於開源的程式的基礎，對其**進行增加、刪除或者修改、優化，使之在功能上符合新的需求。

2、css hack是什麼？

不同的瀏覽器，對css樣式相容不同，css hack就是針對瀏覽器的不同，編寫不同的css樣式。

3.css相容方式

（1）瀏覽器對css中的關鍵字相容

「\9″ ie6+都生效

「\0″ ie8+都生效，是ie8/9/10的hack

「\9\0″ 只對ie9/ie10生效，是ie9/10的hack

！important 可以被火狐和ie7所別

* 可以ie7所別

*+ 可以ie7和ie6所別

_ 可以ie6所別

demo

.div
（2）瀏覽器專用的注釋
（3）對超連結的樣式書寫格式最好遵從l-v-h-a

type="text/css">


a:link{};


a:visited{};


a:hover{};


a:active{};


style>
（4）li裡面的文字過長以省略來顯示

type="text/css">


listyle>
（5）將文字框裡面的文字對齊

type="text/css">


input


style>
（6）瀏覽器設定固定高度時，是不會像ie6那樣被撐開的，如果像要像ie6那樣被撐開，要將高度設定min-height

type="text/css">


divstyle>
（7）firefox對div與div之間的空格是忽略，而ie6則是會對其進行處理，這樣會造成格式不正確的情況。

（8）不同瀏覽器對透明度的相容

div
（9）使用浮動屬性後，ie6的外邊距為實際邊距的2陪，解決辦法為：

display：inline

（11）css控制圓角，但是ie不支援圓角

div
（12）firefox中的滑鼠手勢cursor屬性對hand不支援，但是支援pointer，而ie則是兩個都支援，所以為了相容性都統一使用pointer

相容性（空格相容性）

在chrome與firefox下顯示的寬度不同，原因是兩個瀏覽器的預設字型不同，給html規定字型即可解決。下面有各種形式的空格，各有不同 不換行空格，按下空格鍵所產生的空格，受字型影響明顯 ensp 半形空格 em寬度的一半 乙個小寫字母的寬度 基本不受字型影響 emsp 全形空格 乙個em寬度 ...

js 常見相容性處理

1 獲取滾動條相容var height document.documentelement.scrolltop document.body.scrolltop 2 獲取可是區域相容var clientwidth window.innerwidth document.documentelement.cl...

ie placeholder屬性的相容性問題

html 5 有個很棒的屬性，placeholder，在滑鼠聚焦到上面時候，提示文字會消失，失去焦點之後，又會出現 但是在不支援html5的低版本的瀏覽器中，placeholder屬性是無效的，為了解決這個問題，因此，人為的去實現placeholder屬性 placeholder功能實現 var p...