僅適用於IE9的CSS，但其他CSS正在申請

我必須將border-radius CSS屬性應用於按鈕，但僅當瀏覽器不是Internet Explorer 9.否則，我想使用background-image屬性。我嘗試使用條件註釋將background-image應用於IE9，但它不起作用（來自「常規」CSS的border-radius屬性也應用於IE9，而不是background-image）。僅適用於IE9的CSS，但其他CSS正在申請

如何更改此設置以使其根據瀏覽器版本應用所需的CSS？

/*For IE9*/ 
<!--[if lte IE 9]> 
.PopupBtn 
{ 
    background-image: url("../Images/new-btn.png"); 
    height: 28px; 
    width: 99px; 
    border-left-width: 0px; 
    border-top-style: none; 
    border-right-style: none; 
    border-bottom-style: none; 
    border-left-style: none; 
    cursor: pointer; 
} 
<![endif]--> 

/*Style.css(general)*/ 
.PopupBtn 
{ 
    -moz-box-shadow: inset 0px 2px 1px 0px #0d0d0d; 
    -webkit-box-shadow:inset 0px 2px 1px 0px #0d0d0d; 
    box-shadow:inset 0px 2px 1px 0px #0d0d0d; 
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #fffcff), color-stop(1, #000000)); 
    background:-moz-linear-gradient(center top, #fffcff 5%, #000000 100%); 
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffcff', endColorstr='#000000'); 
    background-color:#fffcff; 
    -moz-border-radius:22px; 
    -webkit-border-radius:22px; 
    border-radius:22px; 
    display:inline-block; 
    color:#fcfcfc; 
    font:bold 13px trebuchet ms; 
    text-decoration:none; 
    text-shadow:1px 0px 0px #000000; 
    min-width:90px; 
    height:30px; 
    cursor:pointer; 
    border-style:none; 
}

來源

2013-02-07 Jaswanth

[點擊這裏]（http://stackoverflow.com/questions/9601775/conditional-css-in-css-not-working/9601850#9601850），看看這應該是有用的類似計算器的問題。 – Lokerim

您需要將Internet Explorer條件註釋放在實際的網頁上，而不是在CSS文件中。

避免添加內聯CSS代碼。相反，把它們放在他們自己的CSS文件中。分離你的CSS文件是個好主意。爲IE製作一個「黑客」，另一個用於常規樣式表。

因此，舉例來說，把你的IE特定的CSS在ie.css文件：

ie.css：

.PopupBtn { 
    background-image: url("../Images/new-btn.png"); 
    height: 28px; 
    width: 99px; 
    border-left-width: 0px; 
    border-top-style: none; 
    border-right-style: none; 
    border-bottom-style: none; 
    border-left-style: none; 
    cursor: pointer; 
}

替代常規樣式表的style.css。

在<head>標籤放：

<head> 
    <link rel="stylesheet" type="text/css" href="style.css"> 

    <!-- [if lte IE 9]> 
     <link rel="stylesheet" type="text/css" href="ie.css"> 
    <![endif]--> 
</head>

注：

IE仍然會從它理解你的常規樣式表應用於任何樣式。所以，請確保條件註釋和ie.css樣式表應用後常規樣式表。這樣，它可以覆蓋你不想要的任何樣式。

確保你明確地重寫你不想在ie.css任何樣式，否則會「流血」，通過在IE顯示

見下面我的jsfiddle鏈接。如果你在IE 9中運行它，你會看到一個綠色的漸變，用紅色表示「你好」。如果你在任何其他瀏覽器中運行它，你應該看到一個黑色的漸變，白色的單詞「你好」。

http://jsfiddle.net/mKrRL/

來源

2013-02-07 06:53:11 Tuan

嗨，我的問題是我無法避免的style.css – Jaswanth

您最初發布將無法正常工作的代碼應用CSS。你的CSS文件中有條件註釋。他們需要在html頁面上。將你的風格移動到單獨的文件中，並將條件註釋添加到你的html文件的''標記 - 就像我的例子。 – Tuan

我在HTML中使用的第一碼只即，條件註釋，並且第二個是在單獨的CSS文件和鏈接到我的網頁爲u在上面的例子中所述。當試圖在ie9的情況下運行該頁面時，兩個css都會覆蓋。你能否詳細說明一下。 – Jaswanth

IE的條件註釋實際上是html註釋，所以你不能讓它們在一個css文件中，他們必須在網頁中。某處在你的網頁，你就會有

<!--[if lte IE 9]> 
<style> 
.PopupBtn 
{ 
background-image: url("../Images/new-btn.png"); 
height: 28px; 
width: 99px; 
border-left-width: 0px; 
border-top-style: none; 
border-right-style: none; 
border-bottom-style: none; 
border-left-style: none; 
cursor: pointer; 
} 
</style> 
<![endif]-->

甚至外部樣式錶鏈接速滑運動員的肌肉評論

來源

2013-02-07 06:30:08 Musa

更好的使用jQuery這一點。

if ($.browser.msie && parseInt($.browser.version, 10) == 9) 
$('.PopupBtn').css({'background-image':'url(../Images/new-btn.png)','height':'28px','width':'99px'});

見http://api.jquery.com/css/的好處是，你不僅要使用更少的代碼，但可以調整的一切，不只是CSS。這只是一個例子，你必須填寫其他內容:)

來源

2013-02-07 06:30:18 bicycle

可能會使用完全適合您：

<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"> </script>

利用頭標記該Java腳本。

來源

2014-01-08 06:58:07

僅適用於IE9的CSS，但其他CSS正在申請

回答

相關問題