0

CSSプロパティをボタンに適用する必要がborder-radiusありますが、ブラウザがInternet Explorer 9でない場合に限ります。それ以外の場合は、background-imageプロパティを使用します。background-image条件付きコメントを使用してIE9に適用しようとしましたが、機能していません（ border-radius「一般的な」CSSのプロパティが代わりにIE9にも適用されていますbackground-image）。

これを変更して、ブラウザのバージョンに応じて目的の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;
}
4

4 に答える 4

2

これには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-07T06:30:18.153 に答える
1

IEの条件付きコメントは実際にはhtmlコメントであるため、Webページにある必要がある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-07T06:30:08.823 に答える
1

それはあなたのために完全に使用されるかもしれません:

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

この Java スクリプトを head タグで使用します。

于 2014-01-08T06:58:07.173 に答える
0

Internet Explorerの条件付きコメントは、CSSファイルではなく実際のWebページ に配置する必要があります。

インラインCSSコードの追加は避けてください。代わりに、それらを独自のCSSファイルに入れてください。CSSファイルを分離することをお勧めします。1つはIEの「ハック」用に、もう1つは通常のスタイルシート用に作成します。

したがって、たとえば、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で実行すると、「Hello」という単語が赤で表示された緑のグラデーションが表示されます。他のブラウザで実行すると、「こんにちは」という単語が白で表示された黒のグラデーションが表示されます。

http://jsfiddle.net/mKrRL/

于 2013-02-07T06:53:11.700 に答える