常見的CSS兼容性問題及解決方法有哪些

常見的CSS兼容性問題及解決方法有哪些？很多人都不太了解，今天小編為了讓大家更加了解CSS兼容性問題，所以給大家總結(jié)了以下內(nèi)容，一起往下看吧。

創(chuàng)新互聯(lián)公司專業(yè)網(wǎng)站設(shè)計(jì)、成都網(wǎng)站設(shè)計(jì)，集網(wǎng)站策劃、網(wǎng)站設(shè)計(jì)、網(wǎng)站制作于一體，網(wǎng)站seo、網(wǎng)站優(yōu)化、網(wǎng)站營(yíng)銷、軟文推廣等專業(yè)人才根據(jù)搜索規(guī)律編程設(shè)計(jì)，讓網(wǎng)站在運(yùn)行后，在搜索中有好的表現(xiàn)，專業(yè)設(shè)計(jì)制作為您帶來效益的網(wǎng)站！讓網(wǎng)站建設(shè)為您創(chuàng)造效益。

瀏覽器的兼容性問題，通常是因?yàn)椴煌臑g覽器對(duì)同一段代碼有不同的解析，造成頁面顯示不統(tǒng)一的情況。

這里談到的瀏覽器，主要指IE6/IE7/IE... FireFox Chrome Opera Safari 等。但更多的兼容還是考慮IE6/IE7/FF之間的斗爭(zhēng)

先來談?wù)凜SS Hack

我們?yōu)榱俗岉撁嫘纬山y(tǒng)一的效果，要針對(duì)不同的瀏覽器或不同版本寫出對(duì)應(yīng)可解析的CSS樣式，所以我們就把這個(gè)針對(duì)不同瀏覽器/版本而寫CSS的過程叫做 CSS hack.

CSS hack主要有三種：IE條件注釋法、CSS屬性前綴法、選擇器前綴法。

（1）IE條件注釋法，即在正常代碼之外添加判別IE瀏覽器或?qū)?yīng)版本的條件注釋，符合條件的瀏覽器或者版本號(hào)才回執(zhí)行里邊的代碼。

<!--  lt是小于 gt是大于 lte是小于等于 gte是不小于 !是不等于 -->

<!-- [if IE]>
   你想要執(zhí)行的代碼 
<![endif]-->

<!-- [if lt IE 8]>
   你想要執(zhí)行的代碼 
<![endif]-->

<!-- [if ! IE 8]>
   你想要執(zhí)行的代碼 
<![endif]-->

(2)CSS屬性前綴法，即是給css的屬性添加前綴。比如 * 可以被IE6/IE7識(shí)別，但 _ 只能被IE6識(shí)別，IE6-IE10都可以識(shí)別 "\9"，IE6不能識(shí)別!important FireFox不能識(shí)別 * _ \9

可以先使用“\9"標(biāo)記，將IE分離出來，再用”*"分離出IE6/IE7，最后可以用“_”分離出IE6

.type{
        color: #111; /* all */

        color: #222\9; /* IE */
        *color: #333; /* IE6/IE7 */
        _color: #444; /* IE6 */
     }

所以可以按著優(yōu)先級(jí)就能給特定的版本捎上特定顏色

可以先使用“\9"標(biāo)記，將IE分離出來，再用”*"分離出IE6/IE7，最后可以用“_”分離出IE6

.type{
        color: #111; /* all */

        color: #222\9; /* IE */
        *color: #333; /* IE6/IE7 */
        _color: #444; /* IE6 */
        }

所以可以按著優(yōu)先級(jí)就能給特定的版本捎上特定顏色

為什么說一般呢...你看看下面這個(gè)例子，IE6貌似還認(rèn)得出!important

其實(shí)也能看出來了，當(dāng)屬性一起寫在{}里頭時(shí)，前者肯定會(huì)被后者覆蓋。要使!important有效，就應(yīng)置于多個(gè){}間。

  h3{color: #f00 !important; }
    h3{color: #000;}
    h4{color: #f00 !important; color: #000;}

<h3>test1</h3>
<h4>test2</h4>

說明：在標(biāo)準(zhǔn)模式中

“-″減號(hào)是IE6專有的hack
“\9″ IE6/IE7/IE8/IE9/IE10都生效
“\0″ IE8/IE9/IE10都生效，是IE8/9/10的hack
“\9\0″ 只對(duì)IE9/IE10生效，是IE9/10的hack

（3）選擇器前綴法，顧名思義，就是給選擇器加上前綴。

IE6可識(shí)別 *p{color:red;}  
IE7可識(shí)別 *+p{color:red;}

@media screen\9{...}只對(duì)IE6/7生效
@media \0screen {body { background: red; }}只對(duì)IE8有效
@media \0screen\,screen\9{body { background: blue; }}只對(duì)IE6/7/8有效
@media screen\0 {body { background: green; }} 只對(duì)IE8/9/10有效
@media screen and (min-width:0\0) {body { background: gray; }} 只對(duì)IE9/10有效
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只對(duì)IE10有效 等等

再來看看主要的兼容問題：

（1）最主要也是最常見的，就是瀏覽器對(duì)標(biāo)簽的默認(rèn)支持不同，所以我們要統(tǒng)一，就要進(jìn)行CSS reset . 最簡(jiǎn)單的初始化方法是 *{margin:0; padding:0;} 但不推薦，而且它也并不完善。

貼一個(gè)淘寶的樣式初始化~

body, h3, h4, h5, h6, h7, h7, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
    body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
    h3, h4, h5, h6, h7, h7{ font-size:100%; }
    address, cite, dfn, em, var { font-style:normal; }
    code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
    small{ font-size:12px; }
    ul, ol { list-style:none; }
    a { text-decoration:none; }
    a:hover { text-decoration:underline; }
    sup { vertical-align:text-top; }
    sub{ vertical-align:text-bottom; }
    legend { color:#000; }
    fieldset, img { border:0; }
    button, input, select, textarea { font-size:100%; }
    table { border-collapse:collapse; border-spacing:0; }

(2)IE6雙邊距bug: 塊屬性標(biāo)簽添加了浮動(dòng)float之后，若在浮動(dòng)方向上也有margin值，則margin值會(huì)加倍。其實(shí)這種問題主要就是會(huì)把某些元素?cái)D到了第二行

<style type="text/css">
    html,body,div{ margin: 0;padding: 0;}
    .wrap{width: 200px; height: 200px; border: 1px solid #333;}
    .box{float: left; /* display:inline */ ;margin-left: 10px; width: 80px; height: 80px; background-color: green;}
    </style>
</head>
 
<body>
 
<div class="wrap">
    <div class="box"></div>
    <div class="box"></div>
</div>
<script type="text/javascript">
 
</script>
</body>

解決的方式有兩個(gè)：

1.給float元素添加display：inline 即可正常顯示

2.就是hack處理了，對(duì)IE6進(jìn)行 _margin-left:5px;

(3)跟上述差不多，也屬于IE6雙邊距bug: 行內(nèi)屬性標(biāo)簽，為了設(shè)置寬高，我們經(jīng)常就會(huì)設(shè)置成display：block; 這樣一來就產(chǎn)生上述的問題。

解決辦法也是天津display：inline; 但是這樣一來我們就不能設(shè)置寬高了，所以呢需要再加個(gè) display:table.

所以你設(shè)置display:block后，再添上display:inline和display:table

(4)上下margin重合問題，相鄰的兩個(gè)p margin-left margin-right 不會(huì)重合，但相鄰的margin-top margin-bottom會(huì)重合。

.box1{width: 200px;height: 200px; border: 1px solid #333; }
    .mt{margin-top: 10px;}
    .mb{margin-bottom: 10px;}
 
<div class="box1 mb"></div>
<div class="box1 mt"></div>

（5）有些瀏覽器解析img標(biāo)簽也有不同，img是行內(nèi)的，一般都會(huì)緊接著排放，但是在有些情況下還是會(huì)突然出現(xiàn)個(gè)間距，解決辦法是給它來個(gè)浮動(dòng) float

(6)標(biāo)簽屬性min-height是不兼容的，所以使用的時(shí)候也要稍微改改。這樣吧：

.box{min-height:100px;height:auto !important; height:100px; overflow:visible;}

(7)很多時(shí)候可能會(huì)納悶超鏈接訪問過后樣式就混亂了，hover樣式不出現(xiàn)了。其實(shí)主要是其CSS屬性的排序問題。一般來說，最好按照這個(gè)順序：L-V-H-A

簡(jiǎn)單的記法是 love hat

a:link{}  a:visited{}  a:hover{}  a:active{}

(8)chrome下默認(rèn)會(huì)將小于12px的文本強(qiáng)制按照12px來解析。解決辦法是給其添加屬性：

-webkit-text-size-adjust: none;

（9)png24位的圖片在IE6下面會(huì)出現(xiàn)背景，所以最好還是使用png8格式的

(10)因?yàn)榇嬖趦煞N盒子模式：IE盒子模式和W3C標(biāo)準(zhǔn)模式，所以對(duì)象的實(shí)際寬度也要注意。

IE/Opera：對(duì)象的實(shí)際寬度 = (margin-left) + width + (margin-right)
Firefox/Mozilla：對(duì)象的實(shí)際寬度= (margin-left) + (border-left-width) + (padding- left) + width + (padding-right) + (border-right-width) + (margin-right)

（11）鼠標(biāo)的手勢(shì)也有問題：FireFox的cursor屬性不支持hand，但是支持pointer，IE兩個(gè)都支持；所以為了兼容都用pointer

（12）有個(gè)說法是：FireFox無法解析簡(jiǎn)寫的padding屬性設(shè)置。

如padding 5px 4px 3px 1px；必須改為 padding-top:5px; padding-right:4px; padding-bottom:3px; padding-left:1px。但我試了一下，發(fā)現(xiàn)還是可以解析的，難道是版本的原因？

（13）消除ul、ol等列表的縮進(jìn)時(shí)，樣式應(yīng)寫成:list-style:none;margin:0px;padding:0px; 其中margin屬性對(duì)IE有效，padding屬性對(duì)FireFox有效

（14）CSS控制透明度問題：一般就直接 opacity: 0.6 ; IE就 filter: alpha(opacity=60)

但在IE6下又有問題，所以又得弄成 filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60);

(15)有些時(shí)候圖片下方會(huì)出現(xiàn)一條間隙，通常會(huì)出現(xiàn)在FF和IE6下面比如

<div><img src="1.jpg"/></div>
一般給img添加vertical-align屬性即可，比如top middle
img{verticle-align:center;}

(16)IE6下p高度無法小于10px

比如定義一條高2px的線條，F(xiàn)F和IE7都正常

常見的CSS兼容性問題及解決方法有哪些

但I(xiàn)E6就是10px

常見的CSS兼容性問題及解決方法有哪些

解決的辦法有兩種：添加overflow屬性或設(shè)置fontsize大小為高度大小如：

<div style="height:2px;overflow:hidden;background:#000000;width:778px;"></div>
<div style="height:2px;font-size:2px;background:#000000;width:778px;">&nbps;</div>

以上就是常見的CSS兼容性問題及解決方法有哪些的簡(jiǎn)略介紹，當(dāng)然詳細(xì)使用上面的不同還得要大家自己使用過才領(lǐng)會(huì)。如果想了解更多，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道哦！

網(wǎng)站題目：常見的CSS兼容性問題及解決方法有哪些
路徑分享：http://aaarwkj.com/article24/ihphje.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站制作、Google、網(wǎng)站設(shè)計(jì)公司、面包屑導(dǎo)航、搜索引擎優(yōu)化、App開發(fā)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一级特黄大片做受成人-亚洲成人一区二区电影-激情熟女一区二区三区-日韩专区欧美专区国产专区

常見的CSS兼容性問題及解決方法有哪些