24

Internet Explorer 10 が明示的に設定された幅と高さの属性を完全に無視して、実際の画像サイズを優先する Web サイトがあります。

イメージは次のように定義されます。

<img style="float: left; margin: 0px 10px 0px 0px; display: inline;" 
     align="left" src="http://blog.hinshelwood.com/files/2012/09/metro-findings.png"
     width="64" 
     height="64"/>

ただし、IE10 では 128x128 としてレンダリングされます。Chrome では、期待どおりです。

例http://blog.hinshelwood.com/tfs-integration-tools-issue-tfs-wit-invalid-submission-conflict-type/

このページでは、「適用対象」、「ソリューション」、および「調査結果」の画像はすべて 64x64 に設定されていますが、IE10 では 128x128 として表示されます。次の CSS を設定しようとしましたが、これも無視されます。

h3 img {
 width: 64px;
 height: 64px;
}

誰にも理由はありますか？

4

1 に答える 1

45

あなたが持っている

body .content img {
  max-width: 100%;
  height: auto;
  width: auto \9;
}

http://blog.hinshelwood.com/wp-content/themes/pagelines/pagelines-compiled-css-2_1348178943/

IE では、無効width: auto \9;は次のように解釈されます。width: auto;

Chrome では、無効な幅は無視されます。

width auto がないと、画像の動作が異なります。

Chrome では、幅は から派生しh3 IMG { width: 64px; }、高さは自動であるため、画像は 64px に従ってスケーリングされます。

IE では、幅と高さの両方が「自動」のままであるため、デフォルトの IMG サイズが適用されます。

CSS スタイルは IMG タグ属性をオーバーライドします: インライン スタイルを使用して、継承されたスタイルをオーバーライドできます。

<img style="height: 64px; width: 64px;" src="..." />
于 2012-09-21T00:33:09.190 に答える