技術分享使用不同CSS樣式兼容多種瀏覽器

作者：admin 2010-09-08 11:11:50

開發前端

由于存在有IE,firefox還有其他幾個主流的web瀏覽器，因此我們在設置CSS時需要兼容這幾種常用的瀏覽器才能有好的用戶體驗,這里和大家介紹一下如何使用不同的CSS樣式兼容多種瀏覽器。

瀏覽器兼容問題一直是大家比較關注的，這里和大家分享一下如何使用不同的CSS樣式兼容多種瀏覽器，我們在設置CSS時需要兼容這幾種常用的瀏覽器才能有好的用戶體驗。我們可以通過html的條件注釋來實現這種兼容，原理如下文詳細介紹。

如何使用不同的CSS樣式兼容多種瀏覽器

由于存在有IE,firefox還有其他幾個主流的web瀏覽器，因此我們在設置CSS時需要兼容這幾種常用的瀏覽器才能有好的用戶體驗。我們可以通過html的條件注釋來實現這種兼容，原理如下：

◆條件注釋的基本結構和HTML的注釋(<!––>)是一樣的。因此IE以外的瀏覽器將會把它們看作是普通的注釋而完全忽略它們。

◆IE將會根據if條件來判斷是否如解析普通的頁面內容一樣解析條件注釋里的內容。

◆條件注釋使用的是HTML的注釋結構，因此他們只能使用在HTML文件里，而不能在CSS文件中使用。

下面是一個典型的運用實例：

示例代碼

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN"  
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html> 
<head> 
<title>CSS在線-示例</title> 
<!–默認先調用CSS.CSS樣式表–> 
<linkrellinkrel=”stylesheet”type=”text/CSS”href=”CSS.CSS”/> 
<styletypestyletype="text/CSS"> 
h1{color:black}  
</style> 
<!–[ifIE7]> 
<!–如果IE瀏覽器版是7,調用ie7.CSS樣式表–> 
<linkrellinkrel=”stylesheet”type=”text/CSS”href=”ie7.CSS”/> 
<styletypestyletype="text/CSS"> 
h1{color:red}  
</style> 
<![endif]–> 
<!–[iflteIE6]> 
<!–如果IE瀏覽器版本小于等于6,調用ie.CSS樣式表–> 
<linkrellinkrel=”stylesheet”type=”text/CSS”href=”ie.CSS”/> 
<styletypestyletype="text/CSS"> 
h1{color:blue}  
</style> 
<![endif]–> 
</head> 
<body> 
<h1>如何兼容多種瀏覽器</h1> 
</body> 
</html>

本文來自CSS在線：http://www.CSSCSS.org/CSSarticle/2010315810.shtml

【編輯推薦】

實例解析CSS中padding、margin屬性用法
CSS Sprites圖片切割術與圖片優化
CSS盒子模式組成及用法解析
CSS中link和@import的區別
CSS分欄布局的兩種方法：絕對定位和浮動

責任編輯：佚名來源： CSSCSS.org

CSS樣式 CSS

技術分享 使用不同CSS樣式兼容多種瀏覽器

技術分享使用不同CSS樣式兼容多種瀏覽器