欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

前端兼容性問(wèn)題總結(jié)(PC端)

  發(fā)布時(shí)間：2017-01-11 15:57:54   作者：juqian   我要評(píng)論
本文主要對(duì)前端 PC端兼容性問(wèn)題進(jìn)行總結(jié)，具有一定的參考價(jià)值，下面跟著小編一起來(lái)看下吧

1.如果圖片加a標(biāo)簽在IE9-中會(huì)有邊框

解決方案:

img{border:none;}

2.rgba不支持IE8

解決方案:可以用 opacity

eg:

opacity:0.7;/*FF chrome safari opera*/ 
filter:alpha(opacity:70);/*用了ie濾鏡,可以兼容ie*/

但是,需要注意的是,opacity會(huì)影響里面元素的透明度

3. display:inline-block ie6/7不支持

解決方案:

display:inline-block;
*display:inline;

4.默認(rèn)的body沒(méi)有body去掉margin情況下ie5、6、7邊緣會(huì)很寬margin-top加倍  如果處于無(wú)聲明狀態(tài)那么所有的ie瀏覽器margin-top加倍

解決方案:用css給body添加magin屬性為0px

body{margin:0;}

5.IE 6.0 Firefox Opera等是 真實(shí)寬度=width+padding+border

IE5.X 真實(shí)寬度=width

解決方案:

方法1. 

div.content { 
　　width:400px;  //這個(gè)是錯(cuò)誤的width(對(duì)于ie5來(lái)說(shuō)是正確的），所有瀏覽器都讀到了 
　　voice-family: "\"}\"";  //IE5.X/win忽略了"\"}\""后的內(nèi)容 
　　voice-family:inherit; 
　　width:300px;  //包括IE6/win在內(nèi)的部分瀏覽器讀到這句，新的數(shù)值(300px)覆蓋掉了舊的 
}　

方法2. 

div.content { 
　　width:300px !important;  //這個(gè)是正確的width，大部分支持!important標(biāo)記的瀏覽器使用這里的數(shù)值 
　　width(空格)/**/:400px;  //IE6/win不解析這句，所以IE6/win仍然認(rèn)為width的值是300px；而IE5.X/win讀到這句，新的數(shù)值(400px)覆蓋掉了舊的，因?yàn)?important標(biāo)記對(duì)他們不起作用 
}

6.height不能小于16px,設(shè)置較小高度標(biāo)簽（一般小于10px），在IE6，IE7，遨游中高度超出自己設(shè)置高度

解決方案:overflow設(shè)置為hidden

7.min-height不兼容  ie6 7解釋為超過(guò)高度就撐開(kāi)，而其他版本瀏覽器則遮蓋下面的層

解決方案:min-height:200px; height:auto !important; height:200px; overflow:visible;

8.position:fixed  IE5、6無(wú)法識(shí)別此屬性

解決方案:

<!--[if lte IE 6]>
　　　<style type="text/css">
　　　　　 html {
　　　　　　　　/*這個(gè)可以讓IE6下滾動(dòng)時(shí)無(wú)抖動(dòng)*/
　　　　　　　　background: url(about:black) no-repeat fixed
　　　　　　}
　　　　　　#demo_t, #demo_b, #demo_l, #demo_r {
　　　　　　　　position: absolute;
　　　　　　}
　　　　　　#demo_t, #demo_b {
　　　　　　　　/*這個(gè)解決body有padding時(shí)，IE6下100%不能鋪滿的問(wèn)題*/
　　　　　　　　width: expression(offsetParent.clientWidth);
　　　　　　}
　　　　　　/*下面三組規(guī)則用于IE6下top計(jì)算*/
　　　　　　#demo_l, #demo_r {
　　　　　　　　top: expression(offsetParent.scrollTop + 300);
　　　　　　}
　　　　　　#demo_t {
　　　　　　　　top: expression(offsetParent.scrollTop);
　　　　　　}
　　　　　　#demo_b {
　　　　　　　　top: expression(offsetParent.scrollTop + offsetParent.clientHeight-offsetHeight);
　　　　　　}
　　</style>
<![endif]-->

9.浮動(dòng)的div有margin_left屬性ie6會(huì)加倍  無(wú)論兼容視圖還是無(wú)聲明視圖

解決方案:

　方案一: IE6唯一識(shí)別屬性_的方式加_display屬性_display:inline;

　方案二:

　　　　條件注釋<!--[if lte IE 6]>
　　　　<style>
　　　　　　.on{ display:inline }
　　　　</style>
　　　　<![endif]-->

10.cursor兼容  自定義指針cur格式的圖片url路徑問(wèn)題無(wú)論是兼容還是無(wú)聲明版本

解決方案:cursor:url(Hand.cur), url(/Hand.cur), auto;

11.png圖片  IE6里面的png圖片不能透明 兼容版本和無(wú)聲明版本都是

解決方案:

<!--[if IE ]>
　　　<style type="text/css">
　　　　　#DIVname{
　　　　　　　　background:none;
　　　　　　　　filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="pngtouming.png"
　　　　　}
　　　</style>
<![endif]-->

12.img浮動(dòng)  img標(biāo)簽打回車會(huì)造成每個(gè)圖片之間有縫隙

解決方案:可以刪除之間的回車鍵也可以讓這些圖片浮動(dòng)

13.在IE瀏覽器下 input type="text"文本框點(diǎn)擊時(shí)后面會(huì)出現(xiàn)"X",以及type="password"后面會(huì)出現(xiàn)眼睛,如何除去這兩種默認(rèn)樣式:

::-ms-clear,::-ms-reveal{display:none;}

注:IE9-不識(shí)別

14.CSS3前綴  -webkit-  webkit渲染引擎  chrome/safari

　　　　　　   -moz-   gecko渲染引擎   firefox

　　　　　　   -ms-    trident渲染引擎  IE

　　　　　　   -o-  　opeck渲染引擎　opera　　　　

動(dòng)畫(huà)、過(guò)渡、background-size 都需要加前綴

eg: 動(dòng)畫(huà)

 @-webkit-keyframes name{
　　　　0%{動(dòng)畫(huà)開(kāi)始的css樣式;}
　　　　100%{動(dòng)畫(huà)結(jié)束的css樣式;}
　}
-webkit-animation:name 8s infinite linear;

過(guò)渡:

div.box{
　　　　bottom:-40px;<br>　　  　-webkit-transition:all .3s ease-in-out 0s;
}

注:但是過(guò)渡不兼容IE8-,可以用JS動(dòng)畫(huà)實(shí)現(xiàn)

background-size 同樣也不支持IE8,可以考慮用img

15.漸變

解決方案:

filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#35FEA1,endColorStr=#6E9DFF); /*IE 6 7 8*/
    background: -ms-linear-gradient(top, #35FEA1,  #6E9DFF);/* IE 10 */
    background:-moz-linear-gradient(top, #35FEA1,  #6E9DFF); /*火狐*/
    background:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#35FEA1), to(#6E9DFF));/*谷歌*/
    background: -webkit-gradient(linear, 0% 0%, 0% 100%,from(#35FEA1), to(#6E9DFF));/* Safari 4-5, Chrome 1-9*/
    background: -webkit-linear-gradient(top, #35FEA1,  #6E9DFF);/*Safari5.1 Chrome 10+*/
    background: -o-linear-gradient(top, #35FEA1,  #6E9DFF);/*Opera 11.10+*/

16.PIE.htc 可以實(shí)現(xiàn)很多css3屬性在IE下的兼容性 如:圓角、陰影、漸變

(1) 圓角 border-radius

.signBtn{
    height: 40px;
    background-color:#08BCD2;
    color: #fff;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    behavior: url(css/PIE.htc);
}

(2)陰影 box-shadow

.box{
　　width:200px;
　　height:200px;
　　-webkit-box-shadow:1px 0 10px;
　　-moz-box-shadow:1px 0 10px;
　　box-shadow: 1px 0 10px;
　　background-color: #fff;
　　behavior: url(css/PIE.htc);/*IE邊框陰影*/
}

(3)背景透明rgba

.box{
　　 background-color:rgba(12, 154, 171, 0.29);
    behavior: url(css/PIE.htc);
    -pie-background:rgba(12, 154, 171, 0.29);
}

(4)漸變

.box{
   width:200px;
   height:400px;
   background:-webkit-gradient(linear, 0 0, 0 bottom, from(#9F9), to(#393));
   background:-moz-linear-gradient(#9F9, #393);
   -pie-background:linear-gradient(#9F9, #393);
   behavior:url(pie.htc);                
}

注:PIE.htc文件路徑相對(duì)是相對(duì)于css文件,并非html文件,以上例子是將PIE.htc文件放在與css樣式文件同一個(gè)文件夾css內(nèi),而對(duì)應(yīng)的html問(wèn)價(jià)與css文件夾同級(jí)

17.JS實(shí)現(xiàn)點(diǎn)擊跳轉(zhuǎn)到指定位置

$(".arraw-bt").click(function(){
    var scroll_offset = $("#section").offset();
     console.log(scroll_offset);
     $("body,html").animate({//如果只寫(xiě)body,只被chrome支持 只被chrome支持 Firefox和ie不支持
     "scrollTop":scroll_offset.top
     },0);//此處0寫(xiě)上會(huì)一下跳轉(zhuǎn)到指定位置,若不寫(xiě)會(huì)有過(guò)渡效果
   /});

以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持腳本之家！

相關(guān)文章

  • 詳解CSS3瀏覽器兼容

    本篇文章主要介紹了CSS3與頁(yè)面布局學(xué)習(xí)和總結(jié)——瀏覽器兼容與前端性能優(yōu)化 ，具有一定的參考價(jià)值，有需要的可以了解一下。
    2022-09-29

  • IE6下兼容性常見(jiàn)的幾個(gè)問(wèn)題與解決方法

    關(guān)于IE6兼容性問(wèn)題有很多值得學(xué)習(xí)的地方，本文就給大家介紹一下在IE6下兼容性常見(jiàn)的幾個(gè)問(wèn)題，以及相對(duì)應(yīng)的解決方法。希望通過(guò)本文的介紹大家對(duì)IE6兼容性的認(rèn)識(shí)能更深一些
    2016-11-05

  • 瀏覽器hack總結(jié) 詳細(xì)的瀏覽器兼容性的快速解決方法

    下面小編就為大家?guī)?lái)一篇瀏覽器hack總結(jié) 詳細(xì)的瀏覽器兼容性的快速解決方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起公司小編過(guò)來(lái)看看吧
    2016-06-16

  • HTML5中的進(jìn)度條progress元素簡(jiǎn)介及兼容性處理

    HTML5能夠用progress標(biāo)簽直接向頁(yè)面添加進(jìn)度條,這還是相當(dāng)exciting的,不過(guò)各瀏覽器下的默認(rèn)顯示效果會(huì)有差異,這里我們就來(lái)看看HTML5中的進(jìn)度條progress元素簡(jiǎn)介及兼容性處
    2016-06-02

  • HTML5的video標(biāo)簽的瀏覽器兼容性增強(qiáng)方案分享

    使用HTML5時(shí)就應(yīng)該考慮包括桌面以及移動(dòng)端的瀏覽器兼容問(wèn)題,特別是視頻方面瀏覽器對(duì)解碼的支持會(huì)有所不同,所以下面就來(lái)分享一個(gè)HTML5的video標(biāo)簽的瀏覽器兼容性增強(qiáng)方案分
    2016-05-19

  • 淺談各種瀏覽器下的CSS Hack兼容性寫(xiě)法

    這篇文章主要介紹了各種瀏覽器下的CSS Hack兼容性寫(xiě)法,CSS Hack大致可以分為內(nèi)部Hack和選擇器Hack以及HTML頭部引用Hack,需要的朋友可以參考下
    2016-03-14

  • CSS3中的Opacity多瀏覽器透明度兼容性問(wèn)題

    用來(lái)設(shè)定元素透明度的 Opacity 是CSS 3里的一個(gè)屬性。當(dāng)然現(xiàn)在還只有少部分瀏覽器支持，不過(guò)各個(gè)瀏覽器都有自己的私有屬性來(lái)支持,其中包括老版本的Mozilla和Safari
    2015-11-09

  • CSS瀏覽器兼容性Hack大全

    本文匯總了一些CSS的瀏覽器兼容性的hack,都是非常常用的，作為一個(gè)前端設(shè)計(jì)師經(jīng)常能夠用到，這里推薦給大家。
    2014-11-24

  • CSS對(duì)瀏覽器的兼容性性處理(IE7,6與Fireofx)

    IE7,6與Fireofx的兼容性的處理實(shí)在是讓前端WEB開(kāi)發(fā)者為之而頭疼的事情，建議盡量用符合W3C標(biāo)準(zhǔn)格式寫(xiě)代碼，本文搜集整理了一些于此相關(guān)方面的知識(shí)，有此需求的各位朋友可以
    2013-08-21

  • IE6,IE7,IE8 css bug搜集及瀏覽器兼容性問(wèn)題解決方法匯總

    斷斷續(xù)續(xù)的在開(kāi)發(fā)過(guò)程中收集了好多的bug以及其解決的辦法，都在這個(gè)文章里面記錄下來(lái)了！希望對(duì)web前端開(kāi)發(fā)有所幫助，也希望大家能在留言里面跟進(jìn)自己發(fā)現(xiàn)的ie6 7 8bug和解
    2013-06-04

最新評(píng)論