遇到的相容性bug

2022-08-11 23:27:25 字數 834 閱讀 3317

1.(ie6):ie6環境下,通過設定z-index:999;無效果;

原因:ie6下,決定層級高低的不是當前的父標籤,而是整個dom tree(節點樹)的第乙個relative屬性的父標籤。

解決辦法:找到domtree裡面所有設定了relative屬性的父標籤,依次遞增設定z-index;

2.(ie6):ie6環境下,input輸入款游標上下不居中;

解決辦法:給input乙個小一點的height,然後用padding上下補白控制input的高度大小;

3.(ie8):input text  裡面用text-indent失效;

解決辦法,將text-indent:30px;換成padding-left:30px;

4.(ie8/ie9):placeholder是css3屬性,不支援;

解決辦法:使用js設定value值;

5.placeholder更改顏色:

需要考慮各種瀏覽器相容性;

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder 

input:-moz-placeholder, textarea:-moz-placeholder

6.(ie8):半透明部分設定樣式:opacity:0.7在ie9/ie10/ff/chrome/opera/safari顯示正常,是圖上的效果。但是這樣在ie6-ie8中是不支援的,需要加上下面這句話:

解決辦法:

filter: progid:dximagetransform.microsoft.alpha(opacity=70);

相容性(空格相容性)

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

常見瀏覽器相容性bug

1 ie6有向左浮動且有向左外邊距或文字向右浮動且有向右外邊距是會出現雙倍外邊距的bug 在 ie5.0 ie5.5 ie6 中,當為乙個塊級元素同時設定了向左浮動 float left 及左邊距或右邊距 margin left margin right 後,則該元素的左邊距或右邊距在某些情況下會是...

相容性小結

1.不同瀏覽器的標籤預設的外補丁和內補丁不同。解決 2.chorme瀏覽器下字型最小12px 解決 font size 12px webkit transform origin x 0 webkit transform scale 0.5833333333333334 scale 12 3.ie瀏覽...