IE8 画像を含んだTableのサイズが変わってしまう

| コメント(0) | トラックバック(0)

画像が含まれているテーブルをIE8で閲覧すると、(paddingがセットされたように)画像の上下左右に隙間があいてテーブルのサイズが変わってしまう現象にあいました。

横幅が同じサイズにもかかわらず、画像の縦幅によって、横幅が広がってしまう現象です。

HTMLとCSSの記述は下記の通りです。

CSSの記述

#AAAA {
	width: 358px;
	height: 208px;
}

#AAAA table{
	width: 358px;
	height: 208px;
	border: 1px ridge #DDDDDD;
	background-color: #FFFFFF;
	border-collapse: collapse;
}

 .BBBB{
	display: block;
	max-width: 350px;
	max-height: 200px;
}


HTMLの記述

<div id="AAAA">
<table summary="画像">
  <tr>
    <td>
      <img src="images/123.png" alt="123" class="BBBB" />
    </td>
  </tr>
</table>
</div>

table の属性に、

table-layout: fixed;

を設定することで回避できました。

トラックバック(0)

トラックバックURL:

コメントする

ARCHIVES