瀏覽器兼容問題產生的緣由及解決方法

時間 2019-11-10

標籤瀏覽器兼容問題產生緣由解決方法欄目瀏覽器简体版

原文原文鏈接

html兼容性問題css

兼容緣由：高版本瀏覽器用了低版本瀏覽器沒法識別的元素，致使其不能解析html

解決方法：使用html5shiv.js使IE支持html5新增的標籤，在head中html5

css3

詳見：http://jingyan.baidu.com/article/8275fc8662ac2b46a13cf65a.htmlexpress

解決html5新標籤【placeholder】低版本瀏覽器下不兼容問題:

(方式一)使用input的value做爲顯示文本，模擬灰色樣式，focus讓$("[placeholder]").val()=="",blur時$("[placeholder]").val(this.defaultValue)；
(方式二)不使用value，添加一個額外的標籤（span）到body裏而後絕對定位覆蓋到input上面,第二種方法詳情看下：

首先，判斷當前瀏覽器是否支持placeholder屬性：瀏覽器

1 function placeholderSupport() { 2 return 'placeholder' in document.createElement('input'); 3 }

上關鍵代碼：app

/* *placeholder兼容ie9如下 author：高豐鳴 add 2016-1-27 */ $(function(){ if(!placeholderSupport()){ // 判斷瀏覽器是否支持 placeholder $(document).ready(function(){ //默認遍歷循環添加placeholder $('[placeholder]').each(function(){ $(this).parent().append("<span class='placeholder'>"+$(this).attr('placeholder')+"</span>"); }) $('[placeholder]').blur(function(){ if($(this).val()!=""){ //若是當前值不爲空，隱藏placeholder $(this).parent().find('span.placeholder').hide(); } else{ $(this).parent().find('span.placeholder').show(); } }) }); } });

css兼容性問題ide

1.IE10 以上不支持濾鏡的使用wordpress

緣由：在IE10中，已經採用HTML5標準[1]，DX Filters和VML分別用SVG和CSS3代替。svn

解決方法：http://www.cnblogs.com/fsjohnhuang/p/4127888.html

2.IE6及如下不支持固定定位

　　IE六、IE7（quirk模式）、IE8（quirk模式）瀏覽器將 'position' 特性的 fixed 值看成錯誤值處理。從而致使使用固定定位的元素使用 'position' 的默認值 static。即這個元素在此時變成了普通流中的元素，這必然會致使佈局錯位等問題。

　　解決方案： 　　

　　在 IE六、IE7（quirk模式）、IE8（quirk模式）中爲固定定位元素設置 '_position:absolute'，再經過 JavaScript 腳本或者 CSS Expression 動態設置其偏移量，可是我發現只能實如今最底部和最頂部固定。要想設置具體的位置還須要配合_margin。

　　使元素固定在瀏覽器的頂部：#top { _position: absolute; _bottom: auto;

　　　　　　　　　　　　　　　　　　 _top: expression(eval(document.documentElement.scrollTop)); }

　　使元素固定在瀏覽器的底部：#bottom { _position: absolute; _bottom: auto;
　　　　　　　　　　　　　　　　　　　　_top: expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0))); }

　　　其餘位置：_margin修改其中的數值控制元素的位置。

附：去除滾動滾動條的時候會出現一閃一閃的狀況
body { _background-attachment:fixed; _background-image:url(about:blank); }

3.IE8如下不支持css3

解決方法：參見：http://www.zhangxinxu.com/wordpress/?p=783

4.button在高度計算上始終使用了Quirks模式（即邊框的計算事在元素的寬度內的）text則不包含邊框高度

5.IE7 下浮動不當引發位置改變

解決方法：同級子元素若其中一個有浮動，最好同級其餘元素也加上浮動，不會形成錯位。

6.IE7下，定位引發位置的改變，形成位置的移動

解決方法：同級子元素若其中一個有定位，最好同級其餘元素也加上定位，不會形成錯位。綜合5，6，附：同級元素下有定位或浮動，最好其餘元素均加上浮動或定位，以避免在IE中引發位置的改變。

7.當line-height小於字體大小時，IE7及如下會出現文字截取的異常。解決方法：暫定位，將line-height設定大於字體大小，height儘可能大於字體大小，以避免字體被截取。

8.圖片默認有間距（幾個img標籤放在一塊兒的時候，有些瀏覽器會有默認的間距，加了問題一中提到的通配符也不起做用。）解決方法：用float去掉這個邊距。

9.對於透明，各瀏覽器兼容都不一樣

解決方法：css背景顏色屬性值進行轉化，有相應的網頁實現功能

.transparent_class {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}

10.select標籤在各個版本上的文字垂直不居中解決方法：ie8 和FF中可經過添加padding：8px 0;解決,已測驗

其他瀏覽器具體參見 http://blog.163.com/zx_1258/blog/static/133233799201331294157506/

11.transparent IE8及如下不支持。

因此css3製做的小三角形IE8及如下不支持，最好用圖片代替小三角形

12.FLOAT閉合（clearing float）

解決辦法：

1) 給父DIV也設上float

2) 在全部子DIV後新加一個空DIV（目前Ext是這麼作的），好比：

 
    
     
       
       
         .parent{ 
         width 
         : 
         100px 
         ;} 
        
 
         .son 
         1 
         { 
         float 
         : 
         left 
         ; 
         width 
         : 
         20px 
         ;} 
        
 
         .son 
         2 
         { 
         float 
         : 
         left 
         ; 
         width 
         : 
         80px 
         ;} 
        
 
         .clear{ 
         clear 
         : 
         both 
         ; 
         margin 
         : 
         0 
         ;parding 
         0 
         ; 
         height 
         : 
         0px 
         ; 
         font-size 
         : 
         0px 
         ;} 
        
 
         <div class= 
         "parent" 
         > 
        
 
             
         <div class= 
         "son1" 
         ></div> 
        
 
             
         <div class= 
         "son2" 
         ></div> 
        
 
             
         <div class= 
         "clear" 
         ></div> 
        
 
         </div> 
        
 
     
 
    
  

3) 萬能 float 閉合將如下代碼加入Global CSS 中，給須要閉合的div加上 class=」clearfix」便可，屢試不爽。

 
         <style> 
        
         /* Clear Fix */ 
        
         .clearfix:after { 
        
         content 
         : 
         "." 
         ; 
        
         display 
         : 
         block 
         ; 
        
         height 
         : 
         0 
         ; 
        
         clear 
         : 
         both 
         ; 
        
         visibility 
         : 
         hidden 
         ; 
        
         } 
        
         .clearfix { 
        
         display 
         :inline- 
         block 
         ; 
        
         } 
        
         /* Hide from IE Mac \*/ 
        
         .clearfix { 
         display 
         : 
         block 
         ;} 
        
         /* End hide from IE Mac */ 
        
         /* end of clearfix */ 
        
         </style>

:after（僞對象）,設置在對象後發生的內容，一般和content配合使用，IE不支持此僞對象，非Ie 瀏覽器支持，因此並不影響到IE/WIN瀏覽器。這種的最麻煩。

4) overflow:auto 只要在父DIV的CSS中加上overflow:auto就搞定。舉例：

 
      .parent{ 
      width 
      : 
      100px 
      ; 
      overflow 
      : 
      auto 
      } 
     
 
      .son 
      1 
      { 
      float 
      : 
      left 
      ; 
      width 
      : 
      20px 
      ;} 
     
 
      .son 
      2 
      { 
      float 
      : 
      left 
      ; 
      width 
      : 
      80px 
      ;} 
     
 
      <div class= 
      "parent" 
      > 
     
 
          
      <div class= 
      "son1" 
      ></div> 
     
 
          
      <div class= 
      "son2" 
      ></div> 
     
 
      </div> 
     

         
     