ie9でimgの高さがheight属性と異なる

質問

お世話になっております。

ie9でimgのheight属性の指定が効かず、指定値より大きく表示されてしまいます。
widthは効いています。
（確認はVBで同じ大きさの画面を表示して確認しています）

同じhtmlをie8で表示させると正しく表示されます。

heightの指定を変更すると大きくなったりしますが、適正な大きさで表示されません。

１００％表示ですのでheight属性を削除してみましたが同じ状態です。

よおしくお願いいたします。

回答No.2

ORUKA1951 · ベストアンサー

HTML

<table class="t100tbl">
　　<tr>
　　　　<td class="td1">
　　　　　<div id="menu">
　　　　　　　<table class=t100tbl><!-- ;は余分 -->
　　　　　　　　　<tr>
　　　　　　　　　　　<td class=tpdg>
　　　　　　　　　　　　　<a href=""><!-- ここ抜けてませんか？ -->
　　　　　　　　　　　　　　　<img src="../Images/aaa.png" alt="aaa"
　　　　　　　　　　　　　　　　name="aaa" class="bdr" />
　　　　　　　　　　　　　</a>
　　　　　　　　　　　</td>
　　　　　　　　　</tr><!-- \n";これも -->
　　　　　　　</div><!-- 対応するdivがありません。 -->
　　　　　</td><!-- 対応するtdがありません。 -->
　　　　　　・
　　　　　　・
　　　　　　・とりあえず、

Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html )などで構文チェックをしてください。
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
メモ: CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。.
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［W3C CSS 検証サービス( http://jigsaw.w3.org/css-validator/#validate_by_input )］より

　さて、とりあえず

td.tpdg img{ display:block;}を入れてみてください。これでセルの内寸に合わせてwidthが決まり、heightは、本来のサイズに合わせて伸縮されるはずです。

お礼

時間がかかりまして申し訳ございません。

いろいろと試したところ、単純に画像を表示してもサイズが崩れます。

他のサイトの画像を確認しても同様の状態です。

ノートPCを使用しているのですが、グラフィックドライバの関係で画像を正しく描画できていないのかもしれません。
（VBの画面などは正しい表示ですがWEB内の画像はサイズがズレます）

最新のドライバを探しましたが、存在しません。（Windows7対応のものが存在しません）

以上のことからやむを得なく、デスクトップを何とか購入して試してみようと思います。

ありがとうごじざいました。

補足

ご回答ありがとうございます。

HTMLの件、申し訳ございません。
PHPで記入しているものからコピーしたため、抜け、対応タグ漏れがあるように
見えていますが、HTML自体には問題無いことを再度、目視にて確認しました。

また教えていただきました
td.tpdg img{ display:block;}
を入れましたが結果は変わらない状態です。

HTML5で削除された属性をCSSに移行することが最終目的です。

どうしてもimgの画像のheightが合いません。

何か判りましたら、よろしくお願いいたします。

当たり前のことですが、私も調査してみます。

回答No.1

ORUKA1951

HTML/CSSには、サイズを参照するときの規則があります。
　imgは、置換インライン要素ですから、そのままでは置換される画像のサイズを参照するはずですが、ブロック要素に変更するとその親コンテナブロックのサイズを参照します。
　詳しくは
10.5 内容領域の高さ（Content height: the 'height' property） ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/visudet.html#the-height-property )
　以降をご覧ください。

　IE8でも、標準モードで起動するとIE9と同じになるはずです。

　そのimg周辺のタグがわかりませんが、
div.section table td img{display:block;width:100%;;height:auto;}とブロックに変更すると、ブロック要素はそれが置かれている親コンテナブロックの内寸を参照して割り出しますから、本文(section)中のtableのセルについては、画像はセルの横幅(内寸)の幅一杯にその画像比率で表示されます。

お礼

お礼を前のご意見につけてしまいました。

申し訳ございません。

ありがとうございました。

補足

早々のご回答ありがとうございます。

IMG周辺のタグは
<table class="t100tbl">
　　<tr>
　　　　<td class="td1"><div id="menu">
　　　　<table class=t100tbl>;
　　　　　<tr><td class=tpdg><img src="../Images/aaa.png" alt="aaa" name="aaa" class="bdr" /></a></td></tr>\n";
　　　　</div></td>
　　　　　　・
　　　　　　・
　　　　　　・
t100tblはwidth100%のcellpadding=0 cellspacing=0
td1はwidth100px height未指定
td2はwidth100% height未指定
bdrはborder-style: none;padding: 0;vertical-align: bottom;
となっており、div要素はすべてAJAXで部分置換のための名称としてのみ使用していました。

この状態でIE8では正しく、IE9ではheight属性よりも高く表示されます。

ブロック要素の中のtableなのでマズイのでしょうか？

教えていただいたサイトを参照させていただきましたが、はっきりしません。

ヒントで構いませんのでよろしくお願いいたします。