溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“CSS常見兼容性問題怎么解決”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“CSS常見兼容性問題怎么解決”文章能幫助大家解決問題。
瀏覽器的兼容性問題，通常是因為不同的瀏覽器對同一段代碼有不同的解析，造成頁面顯示不統一的情況。
這里談到的瀏覽器，主要指IE6/IE7/IE...FireFoxChromeOperaSafari等。但更多的兼容還是考慮IE6/IE7/FF之間的斗爭
先來談談CSSHack
我們為了讓頁面形成統一的效果，要針對不同的瀏覽器或不同版本寫出對應可解析的CSS樣式，所以我們就把這個針對不同瀏覽器/版本而寫CSS的過程叫做CSShack.
CSShack主要有三種：IE條件注釋法、CSS屬性前綴法、選擇器前綴法。
（1）IE條件注釋法，即在正常代碼之外添加判別IE瀏覽器或對應版本的條件注釋，符合條件的瀏覽器或者版本號才回執行里邊的代碼。
<!--lt是小于gt是大于lte是小于等于gte是不小于!是不等于-->
<!--[ifIE]>
你想要執行的代碼
<![endif]-->
<!--[ifltIE8]>
你想要執行的代碼
<![endif]-->
<!--[if!IE8]>
你想要執行的代碼
<![endif]-->
(2)CSS屬性前綴法，即是給css的屬性添加前綴。比如*可以被IE6/IE7識別，但_只能被IE6識別，IE6-IE10都可以識別"\9"，IE6不能識別!importantFireFox不能識別*_\9
可以先使用“\9"標記，將IE分離出來，再用”*"分離出IE6/IE7，最后可以用“_”分離出IE6
.type{
color:#111;/*all*/
color:#222\9;/*IE*/
*color:#333;/*IE6/IE7*/
_color:#444;/*IE6*/
}
所以可以按著優先級就能給特定的版本捎上特定顏色
可以先使用“\9"標記，將IE分離出來，再用”*"分離出IE6/IE7，最后可以用“_”分離出IE6
.type{
color:#111;/*all*/
color:#222\9;/*IE*/
*color:#333;/*IE6/IE7*/
_color:#444;/*IE6*/
}
所以可以按著優先級就能給特定的版本捎上特定顏色
為什么說一般呢...你看看下面這個例子，IE6貌似還認得出!important
其實也能看出來了，當屬性一起寫在{}里頭時，前者肯定會被后者覆蓋。要使!important有效，就應置于多個{}間。
h2{color:#f00!important;}
h2{color:#000;}
h3{color:#f00!important;color:#000;}
<h2>test1</h2>
<h3>test2</h3>
說明：在標準模式中
“-″減號是IE6專有的hack
“\9″IE6/IE7/IE8/IE9/IE10都生效
“\0″IE8/IE9/IE10都生效，是IE8/9/10的hack
“\9\0″只對IE9/IE10生效，是IE9/10的hack
（3）選擇器前綴法，顧名思義，就是給選擇器加上前綴。
IE6可識別*p{color:red;}
IE7可識別*+p{color:red;}
@mediascreen\9{...}只對IE6/7生效
@media\0screen{body{background:red;}}只對IE8有效
@media\0screen\,screen\9{body{background:blue;}}只對IE6/7/8有效
@mediascreen\0{body{background:green;}}只對IE8/9/10有效
@mediascreenand(min-width:0\0){body{background:gray;}}只對IE9/10有效
@mediascreenand(-ms-high-contrast:active),(-ms-high-contrast:none){body{background:orange;}}只對IE10有效等等
再來看看主要的兼容問題：
（1）最主要也是最常見的，就是瀏覽器對標簽的默認支持不同，所以我們要統一，就要進行CSSreset.最簡單的初始化方法是*{margin:0;padding:0;}但不推薦，而且它也并不完善。
貼一個淘寶的樣式初始化~
body,h2,h3,h4,h5,h6,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;}
h2,h3,h4,h5,h6,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:塊屬性標簽添加了浮動float之后，若在浮動方向上也有margin值，則margin值會加倍。其實這種問題主要就是會把某些元素擠到了第二行
<styletype="text/css">
html,body,div{margin:0;padding:0;}
.wrap{width:200px;height:200px;border:1pxsolid#333;}
.box{float:left;/*display:inline*/;margin-left:10px;width:80px;height:80px;background-color:green;}
</style>
</head>
<body>
<divclass="wrap">
<divclass="box"></div>
<divclass="box"></div>
</div>
<scripttype="text/javascript">
</script>
</body>
解決的方式有兩個：
1.給float元素添加display：inline即可正常顯示
2.就是hack處理了，對IE6進行_margin-left:5px;
(3)跟上述差不多，也屬于IE6雙邊距bug:行內屬性標簽，為了設置寬高，我們經常就會設置成display：block;這樣一來就產生上述的問題。
解決辦法也是天津display：inline;但是這樣一來我們就不能設置寬高了，所以呢需要再加個display:table.
所以你設置display:block后，再添上display:inline和display:table
(4)上下margin重合問題，相鄰的兩個pmargin-leftmargin-right不會重合，但相鄰的margin-topmargin-bottom會重合。
.box1{width:200px;height:200px;border:1pxsolid#333;}
.mt{margin-top:10px;}
.mb{margin-bottom:10px;}
<divclass="box1mb"></div>
<divclass="box1mt"></div>
（5）有些瀏覽器解析img標簽也有不同，img是行內的，一般都會緊接著排放，但是在有些情況下還是會突然出現個間距，解決辦法是給它來個浮動float
(6)標簽屬性min-height是不兼容的，所以使用的時候也要稍微改改。這樣吧：
.box{min-height:100px;height:auto!important;height:100px;overflow:visible;}
(7)很多時候可能會納悶超鏈接訪問過后樣式就混亂了，hover樣式不出現了。其實主要是其CSS屬性的排序問題。一般來說，最好按照這個順序：L-V-H-A
簡單的記法是lovehat
a:link{}a:visited{}a:hover{}a:active{}
(8)chrome下默認會將小于12px的文本強制按照12px來解析。解決辦法是給其添加屬性：
-webkit-text-size-adjust:none;
（9)png24位的圖片在IE6下面會出現背景，所以最好還是使用png8格式的
(10)因為存在兩種盒子模式：IE盒子模式和W3C標準模式，所以對象的實際寬度也要注意。
IE/Opera：對象的實際寬度=(margin-left)+width+(margin-right)
Firefox/Mozilla：對象的實際寬度=(margin-left)+(border-left-width)+(padding-left)+width+(padding-right)+(border-right-width)+(margin-right)
（11）鼠標的手勢也有問題：FireFox的cursor屬性不支持hand，但是支持pointer，IE兩個都支持；所以為了兼容都用pointer
（12）有個說法是：FireFox無法解析簡寫的padding屬性設置。
如padding5px4px3px1px；必須改為padding-top:5px;padding-right:4px;padding-bottom:3px;padding-left:1px。但我試了一下，發現還是可以解析的，難道是版本的原因？
（13）消除ul、ol等列表的縮進時，樣式應寫成:list-style:none;margin:0px;padding:0px;其中margin屬性對IE有效，padding屬性對FireFox有效
（14）CSS控制透明度問題：一般就直接opacity:0.6;IE就filter:alpha(opacity=60)
但在IE6下又有問題，所以又得弄成filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60);
(15)有些時候圖片下方會出現一條間隙，通常會出現在FF和IE6下面比如
<div><imgsrc="1.jpg"/></div>
一般給img添加vertical-align屬性即可，比如topmiddle
img{verticle-align:center;}
(16)IE6下p高度無法小于10px
比如定義一條高2px的線條，FF和IE7都正常
但IE6就是10px
解決的辦法有兩種：添加overflow屬性或設置fontsize大小為高度大小如：
<divstyle="height:2px;overflow:hidden;background:#000000;width:778px;"></div>
<divstyle="height:2px;font-size:2px;background:#000000;width:778px;">&nbps;</div>
關于“CSS常見兼容性問題怎么解決”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
