ネガティブマージンを使った段組で、可変幅ブロック内で100%のtableやpreを使う場合のHTML構造とスタイル指定を教えてください。


ネガティブマージン
http://adp.daa.jp/archives/000399.html

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2005/07/01 19:01:00
  • 終了:--

回答(1件)

id:jouno No.1

jouno回答回数280ベストアンサー獲得回数02005/07/02 08:15:19

ポイント40pt

http://www.keynavi.net/ja/bugh/css_misc.html#ireko

HTML,CSSバグ&回避法リスト : 4. スタイルシートその他の話題

ネガティブマージンの場合、widthの値は見かけよりもmargin分だけ広い、つまり100%になっています。


子要素のwidthの%指定の場合、親要素のwidthが基準になります。


そのため、包含されるテーブルをなかに収まるように100%指定しようとすると、そのままでは、画面の100%になってしまいます。


解決策としては、ダミーの要素で囲みます。こうすると、この要素は、自動でネガティブマージンの結果のwidthになるので、これに包含されることで、100%で指定できるようになるわけです。


しかし、IEは親がwidth指定のない要素の場合、さらに親にさかのぼって参照して%指定を解釈してしまうので、ダミー要素をおいても失敗します。そこで、IE対策として、さらにもう一段階、包含します。そして内側のダミー要素にだけ、width:100%を指定します。


その他にブラウザ振り分けでIEにだけwidth:100%指定を与える方法もあります。


preについても本質的には同様だと思いますが、提示されているページの言及だけではちょっとよくわかりませんでした。preにもwidth属性がcssではなくhtmlでありますが、これは文字数の指定で、cssでの代替は存在しないようです。


#test2{width:100%;}

table{width:100%;}


<div id=”test”>

<div id=”test2”>

<table>

<tr>

<th>テーブルのサンプル</th><td>うまくいく?</td>

</tr>

<tr>

<th>どうせこんなもん</th><td>ああ</td>

</tr>

</table>


<pre id=”pre”>

対応UAは、IE6, Mozilla, Opera, Safari, MacIE5あたり。Macromedia Contribute 3で更新することを想定してコメントを各所に入れているが、テキストエディタで編集してもいい。

</pre>

</div>

</div>

id:akiyan

詳しい解説をありがとうございました。

おかげ様で100%にすることができました。

2005/07/04 16:00:46

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません