web-dev-qa-db-ja.com

Internet Explorer 10は画像の幅と高さを無視します

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;
}

誰にもアイデアはありますか？

htmlcssimageinternet-explorer-10
24
MrHinsh - Martin Hinshelwood

あなたが持っている

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; }から派生するようになり、高さは自動であるため、画像は64ピクセルに合わせて拡大縮小されます。

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

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

<img style="height: 64px; width: 64px;" src="..." />
44
John Liu