瀏覽器相容性問題解決方案之CSS，已在IE、FF、Chrome測試

Danna_Danna發表於2013-12-30
瀏覽器CSSChrome

        最近在跟一個同學共同整理一個關於瀏覽器相容性問題的文件，我們主要是找出在主流瀏覽器中出現哪些問題，如何解決這個問題，並給出例項。在這之前，需要明白一下幾個問題。

什麼是瀏覽器相容問題？

        所謂的瀏覽器相容性問題，是指因為不同的瀏覽器對同一段程式碼有不同的解析，造成頁面顯示效果不統一的情況。在大多數情況下，我們的需求是，無論使用者用什麼瀏覽器來檢視我們的網站或者登陸我們的系統，都應該是統一的顯示效果。所以瀏覽器的相容性問題是前端開發人員經常會碰到和必須要解決的問題。

為什麼會出現瀏覽器相容問題？

瀏覽器相容問題的出現，是因為各個瀏覽器對W3C標準支援的程度不同而導致的。如果網頁都是一個標準的話，也不會又這種問題，但微軟把自己當成了標準，不遵循網頁的規範，所以一些網頁即使語法錯誤也會在IE正常顯示，而在FF，谷歌瀏覽器等不同核心的瀏覽器中出現“相容問題”，其實是網頁不遵循Web標準。

當前主瀏覽器的核心是什麼？

        1) Trident：IE瀏覽器使用的核心,該核心程式在1997年的IE4中首次被採用，是微軟在Mosaic程式碼的基礎之上修改而來的，並沿用到目前的IE7。Trident實際上是一款開放的核心，其介面核心設計的相當成熟，因此才有許多采用IE核心而非IE的瀏覽器湧現（如 Maxthon、TheWorld 、TT、GreenBrowser、AvantBrowser等）。

        2) Geckos： Netcape6開始採用的核心，後來的FF也採用了該核心，Geckos的特點是程式碼完全公開，因此，其可開發程度很高，全世界的程式設計師都可以為其編寫程式碼，增加功能。

        3) Presto：目前Opera採用的核心，該核心在2003年的Opera7中首次被使用，該款引擎的特點就是渲染速度的優化達到了極致，也是目前公認網頁瀏覽速度最快的瀏覽器核心，然而代價是犧牲了網頁的相容性。

        4) Webkit：Safari瀏覽器使用的核心。Google的Chrome瀏覽器也是採用Webkit。Webkit引擎包含WebCore排版引擎及JavaScriptCore解析引擎，均是從KDE的KHTML及KJS引擎衍生而來，它們都是自由軟體，在GPL條約下授權，同時支援BSD系統的開發。所以Webkit也是自由軟體，同時開放原始碼。在安全方面不受IE、Firefox的制約，所以Safari瀏覽器還是比較安全的瀏覽器。

我整理的一些例項，都是在谷歌、IE7、IE8、IE9、IE10、FF中測試過。

例項：

1) 隱藏瀏覽器的滾動條

問題：

       隱藏瀏覽器的滾動條

解決：

      1) 只有ie7支援<bodyscroll="no">

      2) 除ie7不支援body{overflow:hidden}

      3) 所有瀏覽器html{overflow:hidden}

例項：

         1) 只有ie7支援<body scroll="no">

           <body scroll="no" ></body>

        2) 除ie7不支援 body{overflow:hidden}

           <body style="overflow:hidden" ></body>

        3) 所有瀏覽器 html{overflow:hidden}

           <body style="overflow:hidden" ></body>

2) 禁用中文輸入法的問題

問題：

      不能在輸入框中輸入漢字

解決：

     用ime-mode:disabled，只在ie系列和ff中有效，谷歌中，尚未找到方法

例項：

<style type=text/css>
body{text-align:center;width:900px;position: relative;margin:0 auto;padding:0;}
#text{
background-position: center center; background-repeat: no-repeat;width:600px;height:400px;ime-mode:Disabled;
}
</style>

<body>
<div style="margin-top:50px;">
<textarea type="text" id="text"  onfocus="if(this.value=='切換輸入法，在此輸入中文試試...')this.value=''" title="試試">切換輸入法，在此輸入中文試試...</textarea>
</div><br /><center>如不能顯示效果，請按Ctrl+F5重新整理本頁</center>
</body>

3) 禁用貼上的問題

問題：

        不能將內容複製到輸入框中

解決：

       onpaste="returnfalse"，瀏覽器通用

例項：

<style type=text/css>
body{text-align:center;width:900px;position: relative;margin:0 auto;padding:0;}
#text{
background-position: center center; background-repeat: no-repeat;width:600px;height:400px;ime-mode:Disabled;
}
</style>
<body>
<div style="margin-top:50px;">
<textarea type="text" id="text" onpaste="return false" onfocus="if(this.value=='在此貼上試試...')this.value=''" title="試試">在此貼上試試...</textarea>
</div><br /><center>如不能顯示效果，請按Ctrl+F5重新整理本頁</center>
</body>

4) 超連結訪問過後hover樣式不出現的問題

問題：

       點選超連結後，hover、active樣式沒有效果

解決：

       改變CSS屬性的排列順序:L-V-H-A 

例項：      

<style type="text/css">
a:link {color: #FF0000}     /* 未訪問的連結 */
a:visited {color: #00FF00}  /* 已訪問的連結 */
a:hover {color: #FF00FF}    /* 當有滑鼠懸停在連結上 */
a:active {color: #0000FF}   /* 被選擇的連結 */
</style>
<body>
<a href="http://blog.csdn.net/dandanzmc" target="_blank" id="blog">歡迎訪問我的部落格</a>
</body>

5) li中的內容以省略號顯示

問題：

       li中內容超過長度時，想以省略號顯示，此方法適用於ie7、8、9、10，谷歌，ff瀏覽器

解決：

       li{list-style-type:none;

       width:200px;

       white-space:nowrap;

       text-overflow:ellipsis;

       overflow: hidden;

       }

例項：

<style type="text/css">
li{
list-style-type:none;
width:200px; 
white-space:nowrap;
text-overflow:ellipsis; 
overflow: hidden; 
 }
</style>

<body>
<li>
11月24日，在湖南耒陽西站買票的劉麗因“涉嫌盜竊”突然被警方帶走。在湖南被拘12天，又轉至青海接受調查。待真相大白，劉麗說噩夢不堪回首：“他們搜我的身，屋裡有攝像頭的……那些天我聽得最多的就是‘程式’，這二字在我心中的含義已經變了。”
</li>
</body>

6) 使連續長欄位自動換行

問題：

         當div框固定高度寬度後，輸入的文字超過div寬度，超出這個長度，不換行

解決：

         word-wrap:break-word

例項：

<style type="text/css">  
<!-- 
div  
{       
width:300px;       
word-wrap:break-word;     
border:1px solid red; } 
-->  
</style> 
<body>
<div id="ff">這裡是一行很長的文字aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>  
</body>

        暫時就整理到這些，當然不止這些，還有很多。真心覺得，這一塊要整理的東西很多，有時候，當這些CSS配上不同的框架後，其樣式又有變化。不同的情況不同的解決方案，這幾個只是簡單的一種相容問題。以後多注意點。



另外關於這部分CSS相容性問題請看總結之：瀏覽器相容性問題解決方案之CSS——已在IE、FF、Chrome測試

關於這部分JS的相容性問題請看總結之：瀏覽器相容之JavaScript篇——已在IE、FF、Chrome測試





相關文章