網頁設計中常見的兼容性問題

常見兼容性問題

1、png24位的圖片在iE6瀏覽器上出現背景,解決方案是做成PNG8.

2、瀏覽器默認的margin和padding不同。解決方案是加一個全局的
*{margin:0;padding:0;}來統一。

3、IE6雙邊距bug:塊屬性標籤float後,又有橫行的margin情況下,在ie6顯示margin比設置的大。

5、這種情況之下IE會產生20px的距離,解決方案是在float的標籤樣式控制中加入 ——display:inline;將其轉化爲行內屬性。(這個符號只有ie6會識別)漸進識別的方式,從總體中逐漸排除局部。

6、首先,巧妙的使用“\9”這一標記,將IE遊覽器從所有情況中分離出來。
接着,再次使用“+”將IE8和IE7、IE6分離開來,這樣IE8已經獨立識別。

 css
        .bb{
            background-color:red;/*所有識別*/
          background-color:#00deff\9; /*IE6、7、8識別*/
          +background-color:#a200ff;/*IE6、7識別*/
          _background-color:#1e0bd1;/*IE6識別*/
        }

7、 IE下,可以使用獲取常規屬性的方法來獲取自定義屬性,
也可以使用getAttribute()獲取自定義屬性;
Firefox下,只能使用getAttribute()獲取自定義屬性。
解決方法:統一通過getAttribute()獲取自定義屬性。

8、IE下,even對象有x,y屬性,但是沒有pageX,pageY屬性;
Firefox下,event對象有pageX,pageY屬性,但是沒有x,y屬性。

9、解決方法:(條件註釋)缺點是在IE瀏覽器下可能會增加額外的HTTP請求數。

10、 Chrome 中文界面下默認會將小於 12px 的文本強制按照 12px 顯示,
可通過加入 CSS 屬性 -webkit-text-size-adjust: none; 解決。

11、超鏈接訪問過後hover樣式就不出現了 被點擊訪問過的超鏈接樣式不在具有hover和active瞭解決方法是改變CSS屬性的排列順序:
L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}


IE6下常見bug及解決方法

ol內li的序號全爲1,不遞增。解決辦法:爲li設置樣式display:list-item;

IE6不支持min-height,解決辦法使用css hack:

.target {
        min-height:100px;
        height: auto!important;
        height: 100px;          //  IE6下內容高度超過會自動擴展高度 }

IE6在設置 height 小於 font-size 時高度值爲 font-size ,解決辦法: font-size: 0;

IE6不支持PNG透明背景,解決辦法: IE6下使用gif圖片

IE6-7不支持 display: inline-block 解決辦法:設置inline並觸發hasLayout

display:inline-block;
display:inline; 
zoom:   1;

IE6下浮動元素在浮動方向上與父元素邊界接觸元素的外邊距會加倍。解決辦法: 1)使用padding控 制間距。 2)浮動元素 display: inline; 這樣解決問題且無任何副作用:css標準規定浮動元素 display:inline會自動調整爲block

通過爲塊級元素設置寬度和左右margin爲auto時,IE6不能實現水平居中,解決方法:爲父元素設 置 text-align: center;

IE5-8不支持 opacity ,解決辦法:

.opacity{opacity:0.4
filter: alpha(opacity=60);  /*  for IE5-7   */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";  /*  for IE  8*/ }

未定位父元素 overflow: auto; ,包含 position: relative; 子元素,子元素高於父元素時會溢出。 解決辦法:1)子元素去掉 position: relative; ; 2)不能爲子元素去掉定位時,父元素 position: relative;

<style  type="text/css">
.outer  {
width:  215px;
height: 100px;border:1px solid red;
overflow:   auto;
position:relative;      /*  修復bug   */ 
}

 .inner {
 width: 100px;
 height:200px;
 background-color:  purple;
</style>

<div class="outer">
    <div class="inner"></div>
</div>

IE6只支持 a 標籤的 :hover 僞類,解決方法:使用js爲元素監聽mouseenter,mouseleave事件,添加 類實現效果:

<style  type="text/css">
 .p:hover, .hover{background:   purple; } 
 </style>

<p  class="p" id="target">
aaaa    bbbbb
<span>DDDDDDDDDDDd</span>
aaaa lkjlkjdf j
</p>

<script type="text/javascript"> 
function addClass(elem, cls){
    if(elem.className){elem.className   +=  ' '+ cls; } 
    else {elem.className = cls;} 
}

function removeClass(elem,  cls){
var className = ' ' + elem.className + ' '; 
var reg = new RegExp(' +' + cls + ' ','g');             elem.className  =   className.replace(reg,  ' ').replace(/^ +|  +$/, ''); }

var target = document.getElementById('target');

 if (target.attachEvent) {               target.attachEvent('onmouseenter', function () {                               addClass(target, 'hover'); });      

target.attachEvent('onmouseleave',  function () {                               removeClass(target, 'hover'); }) 
} 
</script>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章