スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

IEで、テーブル内に定義した文言が意図しないところで改行する。

IEで、テーブル内に定義した文言が意図しないところで改行する。
FireFoxでは問題なし。

[IE]
iefloatバグ

[FireFox]
iefloatバグ2

詳細な原因は不明であるが、IEは、thやtd配下に同一のタグがあり、かつ、floatさせると、
別のクラスを指定していても、同一配下の同じタグに引き継いでしまうようである。

今回は、以下のようなコーディングをしている。
[html]
<th>
<p>電話番号</p>
<span><img src="../images/other/png/img_essential.png" width="50" height="22" alt="必須マーク" /></span>
<p class="exp_note">(※日中ご連絡がつく番号をお願いします)</p>
</th>
<td>

[CSS]
/* テーブルヘッダ内 本文 */ 
#bty_contents table th p {
float:left;
}

/* テーブルヘッダ内 注釈 */
/* (※日中ご連絡がつく番号をお願いします) */
#bty_contents table th p.exp_note {
clear:both;
font-size:12px;
}

/* テーブルヘッダ内 必須・選択マーク配置 */
#bty_contents table th span {
float:right;
}

/* テーブルヘッダ内 本文 */  のCSSが<p class="exp_note">にも引き継がれているようである。
以下のように修正した。

[html]
<th>
<p class="bty_th_title">電話番号</p>
<span><img src="../images/other/png/img_essential.png" width="50" height="22" alt="必須マーク" /></span>
<p class="exp_note">(※日中ご連絡がつく番号をお願いします)</p>
</th>
<td>

[css]
/* テーブルヘッダ内 本文 */
#bty_contents table th p.bty_th_title {
float:left;
width:110px;
}

/* テーブルヘッダ内 注釈 */
/* (※日中ご連絡がつく番号をお願いします) */
#bty_contents table th p.exp_note {
clear:both;
font-size:12px;
}

/* テーブルヘッダ内 必須・選択マーク配置 */
#bty_contents table th span {
float:right;
}

/* テーブルヘッダ内 本文 */のCSSにWidthを追加し、htmlで個別に適用されるように
変更した。



スポンサーサイト

コメントの投稿

非公開コメント

プロフィール

e.swan

Author:e.swan
FC2ブログへようこそ!

最新記事
最新コメント
最新トラックバック
月別アーカイブ
カテゴリ
検索フォーム
RSSリンクの表示
リンク
ブロとも申請フォーム

この人とブロともになる

QRコード
QR
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。