CSS常見兼容性問題總結

時間 2019-11-15

標籤 css 常見兼容性問題總結欄目 CSS 简体版

原文原文鏈接

瀏覽器的兼容性問題，一般是由於不一樣的瀏覽器對同一段代碼有不一樣的解析，形成頁面顯示不統一的狀況。javascript

這裏談到的瀏覽器，主要指IE6/IE7/IE... FireFox Chrome Opera Safari 等。但更多的兼容仍是考慮IE6/IE7/FF之間的鬥爭css

先來談談CSS Hackhtml

　　咱們爲了讓頁面造成統一的效果，要針對不一樣的瀏覽器或不一樣版本寫出對應可解析的CSS樣式，因此咱們就把這個針對不一樣瀏覽器/版本而寫CSS的過程叫作 CSS hack.java

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

　　（1）IE條件註釋法，即在正常代碼以外添加判別IE瀏覽器或對應版本的條件註釋，符合條件的瀏覽器或者版本號纔回執行裏邊的代碼。chrome

<!--  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不能識別 * _ \9express

能夠先使用「\9"標記，將IE分離出來，再用」*"分離出IE6/IE7，最後能夠用「_」分離出IE6

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

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

因此能夠按着優先級就能給特定的版本捎上特定顏色

通常來講，只有IE6不支持 !important 
因此能夠這樣
#example{
    width: 100px !important; /* IE7  FF */
    width: 110px; /* IE6 */

由於!important 具備最高優先級，因此此種方式能夠區別出來~

爲何說通常呢...你看看下面這個例子，IE6貌似還認得出!important 瀏覽器

其實也能看出來了，當屬性一塊兒寫在{}裏頭時，前者確定會被後者覆蓋。要使!important有效，就應置於多個{}間。ssh

    h1{color: #f00 !important; }
    h1{color: #000;}
    h2{color: #f00 !important; color: #000;}

<h1>test1</h1>
<h2>test2</h2>

說明：在標準模式中ui

「-″減號是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可識別 *div{color:red;}  
IE7可識別 *+div{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有效
等等

參考：
http://blog.csdn.net/freshlover/article/details/12132801
http://www.duitang.com/static/csshack.html

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

　　（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>

IE6下左邊的雙邊距 ~

IE7的沒問題 ~

解決的方式有兩個：

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重合問題，相鄰的兩個div 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>

看吧，原本該20px的如今它只有10px

解決辦法就是不要同時採用top和bottom ,統一一些~

　（5）有些瀏覽器解析img標籤也有不一樣，img是行內的，通常都會緊接着排放，可是在有些狀況下仍是會忽然出現個間距，解決辦法是給它來個浮動 float

　　(6)標籤屬性min-height是不兼容的，因此使用的時候也要稍微改改。這樣吧：

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

另外一方面，IE是不支持min-height這類屬性的，因此有些時候也能夠考慮使用CSS表達式

#container{ 

    min-width:600px;
    width: expression(document.body.clientWidth < 600? "600px":"auto");

　　(7)不少時候可能會納悶超連接訪問事後樣式就混亂了，hover樣式不出現了。其實主要是其CSS屬性的排序問題。通常來講，最好按照這個順序：L-V-H-A

簡單的記法是  love  hate 

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屬性設置。

如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下div高度沒法小於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>

-----------------兼容性問題有不少，一次也說不完，日後遇到了，再慢慢添加進來-------------------------

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。