国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

the compatibility problem of ie

GeekQiaQia / 1114人閱讀

摘要:下的兼容問題處理背景透明,圓角,和支持部分選擇器例如支持的語義化標簽,媒體查詢等。在頁面頭部優(yōu)先加載需要的插件,因為部分插件需要依賴所以需要最先加載。注意順序,插件優(yōu)先添加。這個路徑是相對的路徑。

ie8hack

ie8下的兼容問題處理:背景透明,css3圓角,css3和jquery支持部分css3選擇器(例如:nth-child),支持html5的語義化標簽,媒體查詢@media等。

在html頁面頭部優(yōu)先加載ie8需要的插件,因為部分插件需要依賴jquery,所以jquery需要最先加載。然后用IE的條件注釋添加需要的腳本

樣式css的添加:

如果是其他的樣式.css就添加在里面的全局global.css后面



車險保費計算








腳本js的添加

如果是其他的插件和邏輯js就添加在 的上方。注意順序,插件js優(yōu)先添加。












css細節(jié)注意點

只要如上添加插件js就可以在ie8下使用css3和jquery css3選擇器nth-child,html5語義化標簽,如:section articel,媒體查詢@media等。

圓角border-radius

兼容ie8css3圓角和陰影的PIE.htc文件的使用方法:

直接將pie.htc文件放在項目結構里,如圖1的紅色塊1

如圖1的紅色塊2 calcPrice.html添加的樣式如圖1的紅色塊3calcPrice.css里面的樣式用到圓角或陰影,需在后面添加behavior: url(../../../public/css/PIE.htc);

關鍵來了,behavior后面的url路徑不是css相對pie,這個和我們平時的background-image使用不一樣。這個路徑是html相對的pie路徑。你也可以理解成calcPrice.html這個頁面添加圖1紅色塊1上面的global.css 的路徑就是behavior: url(../../../public/css/PIE.htc)的正確路徑了,因為pie文件和global.css 文件在同一個目錄下。

樣式規(guī)范注意

盒子陰影:

     box-shadow: 1px 1px 1px #dedede;
    -moz-box-shadow: 1px 1px 1px #dedede;
    -webkit-box-shadow: 1px 1px 1px #dedede;
    behavior: url(../../../public/css/PIE.htc);

圓角

    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    behavior: url(../../../public/css/PIE.htc);

ie8背景圖片沒生效?

例子: background: url(../images/carInfo.png)no-repeat 0 0;
以上這樣的路徑是正確的,在chrom下完全沒問題,為什么到了ie8,背景圖就顯示不了?

解決辦法很簡單
 background: url(../images/carInfo.png)  no-repeat 0 0;
在url()后面加上兩個空格就可以了。
      


嬌氣的ie8,按照上面使用的pie.htc的圓角和盒子陰影,發(fā)現(xiàn)元素隱藏不見了!!!!
解決辦法:在需要用圓角和陰影的元素樣式上加上position:relative; 就可以了。


ie8背景透明opacity

在ie8下背景透明而透明層上沒文字或圖片內容的時候,可以在opacity=0;下一行直接添加 filter:Alpha(opacity=0);

但是透明的背景上有內容的時候,在ie8只上面加了filter:Alpha,是不是覺得就像你大冬天在浴室里帶著眼鏡洗熱水澡看到的情景。。。。。眼前一片朦朧哇~~~

  假設我們需要設置下面的div背景透明而文字不透明
  
我是文字,我不想被透明啊~


/*遮蓋層公共樣式*/
    .coverModal{
        display: none;
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        margin-left: -6%;
        z-index: 9999;
   }
.coverBg {
    height:100%;
    background-color: rgba(0,0,0,0.5);
    /* IE9、標準瀏覽器、IE6和部分IE7內核的瀏覽器(如QQ瀏覽器)會讀懂 */
}

.coverBg .coverCon{
    color: #FFFFFF;
}
@media