Top > 管理 > ブラウザ対応
Last-modified: Thu, 08 Jan 2009 19:06:56 JST

ブラウザ対応メモ

IE,Firefox,Operaの最新バージョンに対応する。IEに関しては、2007年冬の段階でIE6にも対応する。以上を目標とする。

2000年頃からhtmlを書いているが、ブラウザには何年たっても泣かされる。まったく、こんなものに何十時間もかけて何になるというのか…。といっても、度が過ぎてカッコ悪いのは許せない私 (..;

ネックになるポイントは、しっかりメモする。

2007/12/06 ブロック要素のセンタリング

センタリングしたいブロック要素の左右のマージンをautoに指定するのが正解のようだ。たとえば、margin:0px auto;とする。しかし、IEではセンタリングされない。

IEの場合は、親のブロック要素に対してtext-align:center;を指定しておくと、ブロック要素がセンタリングされるバグがあるのでこれを利用する。継承されてテキストがセンタリングされてしまうので、自身はtext-align:left;で戻す。

-<div>
-    <div style="margin:0 auto;">内容</div>
-</div>

+<div style="text-align:center;">
+    <div style="margin:0 auto; text-align:left;">内容</div>
+</div>

firefox、operaはtex-align:center;ではダメ。というか、この挙動が正しく、text-alignは、インライン要素の左右配置を指定するものとのこと。

参考:
http://www.mozilla.gr.jp/standards/webtips0004.html
http://p-grp.nucleng.kyoto-u.ac.jp/~honda/css.html

2009/01/08 <hr>

hrはブロック要素なので、センタリングはmarginの左右に対してautoを指定する。そのとき、上記のIEのバグを回避するために、text-align:centerも書いておくとGood。

2008/01/05 マージン領域への見出しの突出

親要素(menubarのdiv)のpadding領域に、見出し(h4)のmarginを負値にすることで突出させる。他のテキスト全部がインデントしたような格好にするときに便利。

IE7,firefox2.0,Opera9.4で表示が揃うが、またもやIE6が揃わない。小さくなってしまうという内容で、実害なく、とりあえず後回し。

たぶん、このページに書いてある内容だろう。width:100%でmarginやpaddingに値があることが、そもそもおかしいってことですな。

2008/01/13 残っていた、見出しタグのCSS調整。結局、IE6に対応するため、marginに負の値を指定せず、paddingも使用しないこととする。クローズ。

2008/01/13 古いIE

スタンドアロンなIEがある。
http://browsers.evolt.org/?ie/32bit/standalone

IE6のチェックはこれでやろうと思ったが、動かない。Vistaだから?

2008/05/08 CSSのinherit

IE6/IE7でinheritが効かない。Opera9.27はOK。ここなどを読ませてもらうと、未対応のようだ。そして、inheritはCSS2から。

別の方法を考えるにしても、基本的には諦めるしかない。(あんなに時間使ったのに…というオチは、いつもと変わらない (T-T



コメント

適当に書いて頂いて構いません。スパム対策があるので、書き込めない場合があります。また、ボタンを押した後にしばらく時間がかかります。

新規コメント(ラジオボタンで親コメント選択可)
お名前

現在、コメントはありません