tableタグ卒業にむけて
サイトのデザインで目に見えないところをいじっています。具体的には、段組にtableタグをかなり使用していたんですが、それをやめてCSSにしようとしています。でも問題発生。
このサイトのおおまかなデザインは下のようなコードで実現できるはず(margin-left: auto; margin-right: auto;で中央揃えしたい)なのですが、ブラウザによっては中央にこないため、あいかわらずtableタグを使用しています。
<div style="margin-left: auto; margin-right: auto; width: 100%; height: auto;">
<div style="width: 200px; height: 100px;">BOX1</div>
<div style="width: 150px; height: 200px; float: left;">BOX2</div>
<div style="width: 50px; height: 200px; float: left;">BOX3</div>
</div>
<div style="width: 200px; height: 100px;">BOX1</div>
<div style="width: 150px; height: 200px; float: left;">BOX2</div>
<div style="width: 50px; height: 200px; float: left;">BOX3</div>
</div>
↓表示例
BOX1
BOX2
BOX3
以前JavaScriptでも感じたことですが、クロスブラウジングを実現するのは本当に大鬼門です。
そうこうしているうちにいい解説サイト、発見しました!!
コメント
コメントする
- 匿名でのコメントは受け付けておりません。
- お名前（ハンドル名可）とメールアドレスは必ず入力してください。
- メールアドレスを表示されたくないときはURLも必ず記入してください。
- コメント欄でHTMLタグは使用できません。
- コメント本文に日本語(全角文字)がある程度多く含まれている必要があります。
- コメント欄内のURLと思われる文字列は自動的にリンクに変換されます。
- 投稿ボタンを押してエラーがでなければ、投稿は成功しています。反映されるまでには少し時間がかかります。