Internet Explorer 10で画像の幅と高さが無視される

Question

Internet Explorer 10では、明示的に設定された幅と高さの属性が実際の画像サイズになるように完全に無視されています。

画像は次のように定義される。

<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で128×128としてレンダリングされます。 Chromeでは、これはあなたの期待通りです。

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

このページでは、 "Applies To"、 "Solution"、および "Findings"イメージはすべて64x64に設定されていますが、IE10では128x128として表示されます。私は、次のCSSを設定しようとしたが、これはあまりにも無視されます。

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

誰が、なぜ任意のアイデアを持っていますか？

Answer 1

あなたがIEで

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

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

を持っているが、無効なwidth: auto \9;は無効幅は無視され、Chromeでwidth: auto;

として解釈されます。幅自動なし

画像の挙動が異なり、：クロームで

、幅が今​​から誘導され、そして高さが自動であるので、画像が64pxに応じてスケーリングされます。

IEでは、幅と高さの両方が「自動」なので、デフォルトのIMGサイズになります。

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

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