出去打工和儿子租房
  • 常見的瀏覽器兼容問題

    2021-08-31 17:42發布

    概述

    IE兼容性一般主要是兩個問題引起的:一、代碼只支持高版本IE不支持低版本IE 二、代碼只支持低版本IE不支持高版本IE(這個比較少但也存在,主要是一些老的系統)。

     

    常規解決方法

    通過在jsp頁面增加meta的方式來實現兼容。

     

    兼容高版本IE

    如果系統只支持低版本的IE,但是用戶的電腦的IE版本比較高,可以限定瀏覽器對文檔的解析到某一特定版本,或者將瀏覽器限定到一些舊版本的表現中??梢杂萌缦碌姆绞剑?/span>

     

    <meta http-equiv="x-ua-compatible" content="IE=EmulateIE9" >

     

    <meta http-equiv="x-ua-compatible" content="IE=EmulateIE8" >

     

    <meta http-equiv="x-ua-compatible" content="IE=EmulateIE7" >

     

     

    兼容低版本IE

    系統兼容低版本IE比較困難,能做到的是指定瀏覽器按照最高的標準模式解析頁面。主要是用來解決有些用戶的電腦明明用的是IE8、IE9,但是確實用的IE7的文檔模式。

     

    <meta http-equiv="x-ua-compatible" content="IE=edge" >

     

    通過IE嵌入谷歌插件

    如果用戶的電腦確實比較老,也不方便安裝高版本的IE,通過常規的解決方法無法解決兼容性問題的話,可以通過嵌入谷歌插件(Google Chrome Frame),這個插件可以讓用戶的IE瀏覽器外不變,但用戶在瀏覽網頁時,實際上使用的是Google Chrome瀏覽器內核,而且支持IE6、7、8等多個版本的IE瀏覽器。需要注意的是谷歌已在2014年停止對此插件的更新,此插件的離線版本網上非常多,但是很多都用不了,博主也是找了好久才找到一個能用到。

     

    二、常見的兼容問題

    1、select選擇框下的display設置為none時無法隱藏

    這個問題可以用js解決,需要option的時候用js添加進去

     

    2、標簽得閉合,要有結束標簽

    IE8不支持以便簽斜杠直接結尾。

    頁面錯位,可能是標簽少結束符。

     

    3、last-child

    first-child是CSS2的內容,但是last-child不是,所以IE8不行。

    推薦的解決方法不是使用last-child,而是給最后一個元素設置一個.last的class,然后對此進行樣式設置,這樣就全部兼容了。

     

    4、img

    有邊框并且有顏色,邊框會占位置

    解決方法:img{border:none}

     

    5、background

    #fff url() no-repeat 0/center

    注意:顏色一定在最前面,屬性間有空格。

     

    6、不兼容placeholder

    使用js插件:jquery.placeholder.js

    https://github.com/mathiasbynens/jquery-placeholder

     

    7、不兼容text-overflow

    overflow: hidden;

    white-space: nowrap;

    這兩個屬性讓起溢出隱藏和不換行,然后IE8用的時候記得不要加

    word-berak:break-all;

    word-wrap:break-word;

    這樣斷開了,在IE8里面是不會變成省略號的

    (但是在IE6/7/FF/Chrome都沒有問題),其實都單行省略了,本來也沒有必要斷詞

    所以一般標準組合就是:

    overflow: hidden;

    white-space: nowrap;

    -o-text-overflow: ellipsis; /* for Opera */

    text-overflow: ellipsis; /* for IE */

     

    8、不兼容line-height

     line-height:32px;

     line-height: 32px\9; /*IE8*/

    *line-height: 32px; /* IE7支持 */

    _line-height: 32px; /* IE6支持 */

    -ms-line-height: 32px;/*IE9+支持*/

    -webkit-line-height:32px; /*chrome safair*/

    -moz-line-height: 32px;/*火狐*/

     

    9、不兼容transform

    使用filter的Matrix(矩陣)

     

    10、不兼容border-radius

    推薦用背景圖代替

     

    11、ie8不兼容HTML5新標簽

    HTML5的新標簽元素有:

     

    <header>定義頁面或區段的頭部;

    <footer>定義頁面或區段的尾部;

    <nav>定義頁面或區段的導航區域;

    <section>頁面的邏輯區域或內容組合;

    <article>定義正文或一篇完整的內容;

    <aside>定義補充或相關內容;



    出去打工和儿子租房