[英]CSS conditional Comment not working
我的div無法在Chrome,IE和FF中正確排列。 Chrome需要padding-left:40px; IE和FF則沒有。 我已經和if玩了幾個小時,而且我知道我缺少一些簡單的東西。 這就是我一直在嘗試的:
<!--[if !IE]>-->
<link href="non-ie.css" rel="stylesheet" type="text/css">
<!--<![endif]-->
我也嘗試了正常的style.css:
<!--[if !IE]-->
#lower .expo {padding-left:40px;}
<!-- <![endif]-->
或#lower .expo {width:400px; padding-top:40px; 向左飄浮;}
我也試過這個:
#lower .expo {width:400px; padding-left:40px; padding-top:40px; float:left;}
<!--[if gt IE 6]>
#lower .expo {width:400px; padding-top:40px; float:left;}
<!-- <![endif]-->
有趣的是,如果我這樣做:
<!--[if gt IE 6]>
#lower .expo {width:400px; padding-top:40px; float:left;}
<![endif]-->
#lower .expo {width:400px; padding-left:40px; padding-top:40px; float:left;}
IE顯示正確,但不顯示FF或Chrome。 這讓我瘋狂。 我一定錯過了一些簡單的東西,但是我已經看了太久了。
僅出於實際錯誤的考慮,這取決於您的評論方式。 它應該是:
<!--[if !IE]><!-->
<link href="non-ie.css" rel="stylesheet" type="text/css">
<!--<![endif]-->
除此以外,還有一種更好的方法:
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="ie6" lang="en"><![endif]-->
<!--[if IE 7]> <html class="ie7" lang="en"><![endif]-->
<!--[if IE 8]> <html class="ie8" lang="en"><![endif]-->
<!--[if IE 9]> <html class="ie9" lang="en"><![endif]-->
<!--[if IE 10]> <html class="ie10" lang="en"><![endif]-->
<!--[if !IE]><!--><html class="non-ie" lang="en"><!--<![endif]-->
這樣做的好處是,您可以保持僅使用1個樣式表的最佳實踐。 您只需將要入侵的相應IE類作為目標的開頭即可。
例如: .ie6 #target-id
有關更深入的解釋,請查看Paul Irish的文章:
更新:
2012.01.17:這是HTML5 Boilerplate中的當前迭代。 實際上,我們嘗試將其縮減為IE≤8的單個.oldIE類(與安全的CSS hacks一起使用),但這並沒有實現。 無論如何,我們當前的版本。
<!--[if lt IE 7]><html class="lt-ie9 lt-ie8 lt-ie7"><![endif]--> <!--[if IE 7]><html class="lt-ie9 lt-ie8"><![endif]--> <!--[if IE 8]><html class="lt-ie9"><![endif]--> <!--[if gt IE 8]><!--><html class=""><!--<![endif]-->
嘗試下載此javascript文件。 http://firststepdesign.org/browserselect.js然后將其鏈接到您的html中。
<script src="browserselect.js" type="text/javascript"></script>
之后,轉到您的CSS,並使用它們為不同的瀏覽器選擇特定的CSS。
只有Internet Explorer會檢測到。
.ie .example {
background-color: yellow
}
只有Firefox會檢測到這一點。
.gecko .example {
background-color: gray
}
只有Safari和Chrome可以檢測到。
.webkit .example {
background-color: black
}
希望這對您有所幫助。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.