1.如果圖片加a標簽在IE9-中會有邊框?

　　解決方案:

1	img{ border : none ;}

2.rgba不支持IE8

　　解決方案:可以用 opacity

　　?eg:

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

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

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

　　解決方案:

1 2	display :inline- block ; * display : inline ;

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

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

1	body{ margin : 0 ;}

5.IE 6.0 Firefox Opera等是?真實寬度=width+padding+border

　IE5.X?真實寬度=width

　　解決方案:

　　方法1.?

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

　　方法2.?

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

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

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

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

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

8.position:fixed ?IE5、6無法識別此屬性

　　解決方案:

<!--[if lte IE 6]><style type="text/css">html {/*這個可以讓IE6下滾動時無抖動*/background: url(about:black) no-repeat fixed}#demo_t, #demo_b, #demo_l, #demo_r {position: absolute;}#demo_t, #demo_b {/*這個解決body有padding時，IE6下100%不能鋪滿的問題*/width: expression(offsetParent.clientWidth);}/*下面三組規(guī)則用于IE6下top計算*/#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.浮動的div有margin_left屬性ie6會加倍 ?無論兼容視圖還是無聲明視圖?

　　解決方案:

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

　　　　方案二:

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

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

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

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

　　解決方案:

<!--[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浮動 ?img標簽打回車會造成每個圖片之間有縫隙

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

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

　　

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

　　注:IE9-不識別

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

　　　　　　 ??-moz- ? gecko渲染引擎 ? firefox

　　　　　　 ? -ms- ? ?trident渲染引擎 ?IE

　　　　　　 ??-o- ?　opeck渲染引擎　opera　　　　

　　動畫、過渡、background-size 都需要加前綴

　　eg:?動畫

@-webkit-keyframes name{0%{動畫開始的css樣式;}100%{動畫結(jié)束的css樣式;}} -webkit-animation:name 8s infinite linear;

　過渡:

1 2 3

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

注:但是過渡不兼容IE8-,可以用JS動畫實現(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 可以實現(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文件路徑相對是相對于css文件,并非html文件,以上例子是將PIE.htc文件放在與css樣式文件同一個文件夾css內(nèi),而對應(yīng)的html問價與css文件夾同級

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

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

總結(jié)

以上是生活随笔為你收集整理的前端 PC端兼容性问题总结的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。