CSSのURL（）10

私はCSSでこのラインがあります。CSSのURL（）10

.ui-icon-zoom-in { content: url(images/16x16/ZoomIn.png); }

私はこのようなjQuery UI Button widgetを使用しています：Chromeの場合

$("#zoomin").button({ text: false, icons: { primary: "ui-icom-zoom-in" } });

を、私は見ることができます画像はボタンの中央に配置されます。しかし、IE10では、イメージが表示されません。

ここに何か不足していますか？

出典

2013-04-21 Klaus Nji

doctypeを宣言しましたか？私は、最初の行にHTML5 doctypeを宣言しない限り、IEがCSS3をサポートしないことがあることを知っています。 '<！doctype html>' 正しいCSSでは 'content'タグは' before'と 'after'疑似要素。 jqueryを使用して画像を追加する方が良いかもしれません。 –

はい。私は_Layout.cshtmlで宣言された<！DOCTYPE html>を持っています –

私が以下で言うように、 '：before'と'：after''擬似要素以外は 'content'を使うことはできません。 Chromeでレンダリングしてはいけません。（私が知っているのは、一度IEが正常に動作しているからです！） –

contentプロパティは、：beforeおよび：after擬似要素に対してのみ有効です。あなたはそれを変更する必要があります。有効なDOCTYPEが指定されている場合それとは別に

.ui-icon-zoom-in { 
    background: url(images/16x16/ZoomIn.png) no-repeat; 
    width:16px; 
    height:16px; 
}

、IE8 +はcontentプロパティをサポートしています。

出典

2013-04-21 14:59:15

これはアクセシビリティには貧弱ですが、高コントラストモードを使用する人は '背景 'として設定された画像を見ることはありません。 –

@Niels、これは私にとってはうまくいきません。 –

@Oshawott私はちょうど質問に答えています、私は有効な解決策は、適切な 'alt'属性を持つ' img'要素を持つべきであると主張していません。 –

:beforeおよび:afterのCSS3の疑似要素でのみ、contentプロパティが許可されます。おそらく、オブジェクトに画像を追加するjQueryのセレクタを使用する必要があります。

$("#zoomin").html("<img src='images/16x16/ZoomIn.png' alt='Zoom In'>");

出典

2013-04-21 15:02:54

ありがとうございますが、私はコード内のイメージの場所をハードコードしたくありません。私はjQuery UIが推奨するパターンに固執したいと思います。 –

その場合は、 'content' CSSタグで絶対値が0に位置する'：before'要素を使用してください。意味的に正しいわけではありませんが、うまくいくはずです。だから '.ui-icon-zoom-in：before {top：0px;左：0ピクセル。位置：絶対;コンテンツ：url（images/16x16/ZoomIn.png）; } '' .ui-icon-zoon-in'を0px幅に、0pxを 'position：relative'でハイにします。 –

もう一度ありがとうございます。「.ui-icon-zoom-inを0px幅に、0pxをposition：relativeで作成する」とはどういう意味ですか？私はこのようなものには新しいので、コードはより良く役立ちます。 –

私はIE 11 で同じような状況があったコンテンツが<div class="image"> </div> あるので、Chromeで、それはこの

.image { 
    content: url("image.jpg"); 
}

のように動作します

IEで動作させるには、contentオプションを:after要素に設定しました。 Like

.image:after { 
    content: url("image.jpg"); 
}

出典

2017-10-12 09:50:53 stopanko

答えて

関連する問題