CSS--瀏覽器兼容

瀏覽器兼容

       瀏覽器兼容性問題又被稱爲網頁兼容性或網站兼容性問題,指網頁在各種瀏覽器上的顯示效果可能不一致而產生瀏覽器和網頁間的兼容問題。在網站的設計和製作中,做好瀏覽器兼容才能夠讓網站在不同的瀏覽器下都正常顯示。而對於瀏覽器軟件的開發和設計,瀏覽器對標準的更好兼容能給用戶更好的使用體驗。爲什麼會產生這種現象呢?是因爲不同瀏覽器使用的內核及所支持的HTML等網頁語言標準不同,以及用戶客戶端的環境不同造成的顯示效果不能達到理想效果。最常見的問題就是網頁元素位置混亂,錯位。總的來說,瀏覽器兼容問題是指因爲不同的瀏覽器對同一段代碼有不同的解析,造成頁面顯示效果不統一。

       下面是總結的一些我自己使用過的解決瀏覽器兼容問題的css技巧。

        1.在ie6下,設置float屬性的元素的margin會加倍。解決方法:在該元素上加上display:inline。

        2.vertical-align:middle不是解決垂直居中的通用公式。解決方法:將元素的height和line-height屬性值設置成相同的,然後再插入文字,這樣子,元素裏的文字就垂直居中了。

       3.IE6不認識min-height。如果將屬性設置成Min-height,他會當做height,同理,min-width也是如此。解決方法:{min-height:100px;_height:100px;overflow:visible;}overflow:visible這一句意思是當內容超過100px時就自動延長。

       4.IE6下圖片會有空隙。解決方法:設置圖片的屬性display:inline

       5.無法定義1px左右高度很小的容器。這是因爲ie瀏覽器有默認行高。解決方法:overflow:hidden。

     

       除了這些,CSS hack也是解決瀏覽器兼容問題的一個方法。css hack的目的是使你的css代碼兼容不同的瀏覽器。當然我們也可以反過來利用css hack爲不同版本的瀏覽器定製編寫不同的css效果。css hack的三種方式:條件註釋法,類內屬性前綴法,選擇器前綴法。下面列舉一些常用的css hack方式。

     1.條件註釋法:

       <!--[if IE]>這段文字只在IE瀏覽器顯示<![endif]-->

      <!--[if IE 6]>這段文字只在IE6瀏覽器顯示<![endif]-->

      <!--[if get IE 6]>這段文字只在IE6以上版本生效<![endif]-->

      <!--[if ! IE 8]>這段文字在非IE8瀏覽器顯示<![endif]-->

      <!--[if ! IE]>這段文字在非IE瀏覽器顯示<![endif]-->

    2.類內屬性前綴法
       - _       只有IE6識別,7,8,9,10不識別(-color,_color)
       * + #     IE6,7識別,IE8,9,10不識別(*color,+color,#color)
       !important IE6不識別,IE7,8,9,10識別(color:blue!important),FF也可以識別
       \0         IE6,7不識別,IE8,9,10識別(color:red\0)
       \9\0       IE6,7,8不識別,IE9,10識別(color:red\9\0)
        \9         IE都識別

   3.選擇器前綴法
    *html *前綴只對IE6生效
    *+html *+前綴只對IE7生效
    @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有效等等

    雖然css hack能夠解決瀏覽器兼容的一些問題,可以迅速區分瀏覽器版本,但是當我們頁面html結果和css樣式書寫都很符合web標準時,頁面在良好支持web標準的瀏覽器下是不需要css hack的,正式由於對web標準支持不夠良好的瀏覽器的存在纔有css hack。如今現在大家都在朝web標準努力,那麼從長遠看來,css hack的使用可能會引起新的錯誤。

      

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章