imgタグについて

質問

imgタグについて

http://okwave.jp/qa/q5970749.html
この件で質問させていただいてましたが、気になる事がありましたのでアドバイスください。

最初のタグーーーーーーーー
img{border: 0; vertical-align:bottom;}
ーーーーーーーーーーーーー
<img src="/img/space.gif" width="100%" height="10px"/>
IE8でimgタグのvertical-align:top;が反応して1px×1pxの透明の画像が縦に10px以上伸びてしまっていました。

↓そこで、このように分ければいいとアドバイスいただきましたが、
.img1{border: 0;}
.img2{border: 0; vertical-align:bottom;}
imgタグは他のページでも使用しているため
img{border: 0; vertical-align:bottom;}は変更出来ませんでした。

そこで、img2{border : 0;} とcssに書き込み
<img2 src="http://www.itumonavi.jp/img/space.gif" width="100%" height="10px" />
にするとバグは解消されました。

ですが、html的に<img2～ というタグは見た事無いのですが、これは使っておいても問題ないのでしょうか？
もし他に方法がございましたら教えてください。

【css】--------------------------
img {
border: 0;
vertical-align:top;
}
.img1 {
border: 0;
}

【html】--------------------------

<table width="635" height="31" border="0" cellspacing="0" cellpadding="0" bgcolor="#999999">
<tr>
<td width="635">タイトル</td>
</tr>
</table>

<table width="635" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="3"><img src="/img/space.gif" width="100%" height="10px" class="img1"/><!-- スペース --></td>
</tr>
<tr>
<td width="170" rowspan="2"><img src="img/sample.gif" width="170" height="170" alt="test" /></td>
<td width="20" rowspan="2"><img src="img/space.gif" width="20" height="170" class="img1" /><!-- スペース --></td>
<td width="445" style="vertical-align:text-top"><img src="img/space.gif" width="100%" height="5" class="img1" /><!-- スペース -->コピー<div class="guide-line"></div><!-- ライン -->
</td>
</tr>
</table>

回答No.1

ORUKA1951 · ベストアンサー

＞imgタグは他のページでも使用しているため
？？？
　セレクタや疑似要素疑似要素を正しく設定すれば、特定の要素に対してプロパティを設定できます。
・セレクタ
　全称セレクタ
　タイプセレクタ
　子孫セレクタ
　子供セレクタ
　隣接セレクタ
　属性セレクタ
　一意セレクタ
・擬似要素と擬似クラス
　擬似クラス
　擬似要素
<div>
　<p>
　　<img><!-- (1)画像 -->
　</p>
　<div>
　　<p>
　　　<img><!-- (2)画像 -->
　　　<img><!-- (3)画像 -->
　　</p>
　</div>
</div>
div p div img+img{ (3)画像への指定}/*詳細度 5 */
div p div img{ (2)(3)画像への指定} /* 詳細度 4 */
div p img{ (1)(2)(3)の画像への指定}/* 詳細度 3 */
と書けば、詳細度の大きいものが優先される。他のところでimgに何か指定されていても、セレクタさえきちんと設定してあれば、混乱はしません。

　それよりも、space.gifて配置のための空白画像では？？もしそうなら、そんなもの使うの止めましょう。
14.1 スタイルシートの概説 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )
　にも
・余白制御のために画像を用いる。
・ページレイアウトの目的で表を用いる。
・HTMLでページを作らずにプログラムに頼る。

　と名指しして否定されている・・代わりにスタイルシートを使えと・・・

お礼

>それよりも、space.gifて配置のための空白画像では？？もしそうなら、そんなもの使うの止めましょう。
目から鱗です。space.gifは使わなければいけないものだと思ってました。
セレクタについても勉強不足でコレから頑張ります。どうもありがとうございました。