簡體   English   中英

CSS條件注釋不起作用

[英]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的文章:

條件樣式表與CSS hacks? 答:都不行!

更新:

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.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM