|
導讀網頁的本質就是超級文本標記語言，通過結合使用其他的Web技術（如：腳本語言、公共網關接口、組件等），可以創造出功能強大的網頁。因而，超級文本標記語言是萬維網（Web）編程的基礎，也就是說萬維網是建立... 網頁的本質就是超級文本標記語言，通過結合使用其他的Web技術（如：腳本語言、公共網關接口、組件等），可以創造出功能強大的網頁。因而，超級文本標記語言是萬維網（Web）編程的基礎，也就是說萬維網是建立在超文本基礎之上的。超級文本標記語言之所以稱為超文本標記語言，是因為文本中包含了所謂“超級鏈接”點。 本篇文章給大家帶來的內容是關于CSS常見兼容性問題及解決方法的總結 ，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。瀏覽器的兼容性問題，通常是因為不同的瀏覽器對同一段代碼有不同的解析，造成頁面顯示不統一的情況。 這里談到的瀏覽器，主要指IE6/IE7/IE... FireFox Chrome Opera Safari 等。 但更多的兼容還是考慮IE6/IE7/FF之間的斗爭 先來談談CSS Hack 我們為了讓頁面形成統一的效果，要針對不同的瀏覽器或不同版本寫出對應可解析的CSS樣式，所以我們就把這個針對不同瀏覽器/版本而寫CSS的過程叫做 CSS hack. CSS hack主要有三種：IE條件注釋法、CSS屬性前綴法、選擇器前綴法。 （1）IE條件注釋法，即在正常代碼之外添加判別IE瀏覽器或對應版本的條件注釋，符合條件的瀏覽器或者版本號才回執行里邊的代碼。 <!-- lt是小于 gt是大于 lte是小于等于 gte是不小于 !是不等于 --> <!-- [if IE]> 你想要執行的代碼 <![endif]--> <!-- [if lt IE 8]> 你想要執行的代碼 <![endif]--> <!-- [if ! IE 8]> 你想要執行的代碼 <![endif]--> (2)CSS屬性前綴法，即是給css的屬性添加前綴。比如 * 可以被IE6/IE7識別，但 _ 只能被IE6識別，IE6-IE10都可以識別 "\9"，IE6不能識別!important FireFox不能識別 * _ \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有效，就應置于多個{}間。 h1{color: #f00 !important; }
h1{color: #000;}
h2{color: #f00 !important; color: #000;}
<h1>test1</h1>
<h2>test2</h2>說明：在標準模式中
（3）選擇器前綴法，顧名思義，就是給選擇器加上前綴。 IE6可識別 *p{color:red;}
IE7可識別 *+p{color:red;}@media screen\9{...}只對IE6/7生效
@media \0screen {body { background: red; }}只對IE8有效
@media \0screen\,screen\9{body { background: blue; }}只對IE6/7/8有效
@media screen\0 {body { background: green; }} 只對IE8/9/10有效
@media screen and (min-width:0\0) {body { background: gray; }} 只對IE9/10有效
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只對IE10有效 等等再來看看主要的兼容問題： （1）最主要也是最常見的，就是瀏覽器對標簽的默認支持不同，所以我們要統一，就要進行CSS reset . 最簡單的初始化方法是 *{margin:0; padding:0;} 但不推薦，而且它也并不完善。 貼一個淘寶的樣式初始化~ body, h1, h2, h3, h4, h5, h6, 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; }
h1, h2, h3, h4, h5, h6{ 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值會加倍。其實這種問題主要就是會把某些元素擠到了第二行 <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>解決的方式有兩個： 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重合問題，相鄰的兩個p margin-left margin-right 不會重合，但相鄰的margin-top margin-bottom會重合。 .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標簽也有不同，img是行內的，一般都會緊接著排放，但是在有些情況下還是會突然出現個間距，解決辦法是給它來個浮動 float (6)標簽屬性min-height是不兼容的，所以使用的時候也要稍微改改。這樣吧： .box{min-height:100px;height:auto !important; height:100px; overflow:visible;}(7)很多時候可能會納悶超鏈接訪問過后 樣式就混亂了，hover樣式不出現了。其實主要是其CSS屬性的排序問題。一般來說，最好按照這個順序：L-V-H-A 簡單的記法是 love hat 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) （11）鼠標的手勢也有問題：FireFox的cursor屬性不支持hand，但是支持pointer，IE兩個都支持；所以為了兼容都用pointer （12）有個說法是：FireFox無法解析簡寫的padding屬性設置。 如padding 5px 4px 3px 1px；必須改為 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><img src="1.jpg"/></div>
一般給img添加vertical-align屬性即可，比如top middle
img{verticle-align:center;}(16)IE6下p高度無法小于10px 比如定義一條高2px的線條，FF和IE7都正常
但IE6就是10px
解決的辦法有兩種：添加overflow屬性或設置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常見兼容性問題總結_html/css_WEB-ITnose 以上就是CSS常見兼容性問題及解決方法的總結的詳細內容，更多請關注php中文網其它相關文章！ 網站建設是一個廣義的術語，涵蓋了許多不同的技能和學科中所使用的生產和維護的網站。 |
溫馨提示：喜歡本站的話，請收藏一下本站！
本站發布的Win7純凈版系統、Win10純凈版和XP純凈版系統僅為個人學習測試使用，請在下載后24小時內刪除，不得用于任何商業用途，否則后果自負，請支持購買微軟正版軟件！
本站所有資源全部來自于網絡資源,如侵犯到您的權益,請及時通知我們(peng896066052@126.com),我們會及時處理.
Copyright © 2018-2020 雨林木風下載站
