最近下のようなレイアウトをコーディングする機会がありました。
おなじインライン要素の中にフォントサイズが違うテキストが入っているもの。このテキストを中央揃えで表示させたいなあと。すぐに、vertical-align:middle;が思いついたんですが、ブラウザ間で表示に差があってうまくいかなかったので、ちょっと仕様から調べてみました。
- Date:2008/11/16
- Category:マークアップ
- Author: wonder
オライリーの「HTML&XHTML」を読んだので、HTMLの移り変わりを図にしてみました。
- Date:2008/11/12
- Category:css
- Author: wonder
前回の続き。
今回はdisplayの値の中でもtable関連のものを中心に調べました。
table関連の値については、おそらく今後も使うことがないようなものばかりです。
ついでに調べたまで・・・・。
- Date:2008/11/7
- Category:css
- Author: wonder
普段からだいぶお世話になっているdisplayプロパティ。指定する値といえば、blockとinlineそれからnoneくらいだったんですが、実は、指定できる値がたくさんあることに気づきました・・。
まあ、今のままでも特に支障はないんですが、せっかくなんで調べてみました。
前に「cssの基礎から勉強（2）」のエントリで書いたHTMLの標準準拠モードと後方互換モードについてちょっと調べてみました。IE6.0で見た場合、かなりのバグがでるというのは前回書いた通りですが、じゃあどんな感じに崩れてしまうのかを検証してみました。
まず、どんなバグかというと、主なところでは、
- ボックスモデルの解釈の違い
- imgにpaddingがきかない
- margin:autoがきかない、text-alignのバグ
というところだそうです。
今回、あえて後方互換モードにして、このバグを潰しつつ各ブラウザでちゃんと表示させるようなマークアップ方法を試してみました。
