blog.xicoloticCSS

とあるブラウザの text-align 力がちょっと過剰だった時代のお話。

むかーし、むかし。
HTMLの全ての要素がブロックレベル要素とインライン要素に分けられていた頃のお話。

CSSでセンタリングする基本手法としては、今もおなじみのこの2つが使われておった。

  • text-align: center; /* for インライン要素(※包括要素に指定) */
  • margin: 0 auto; /* for ブロック要素 */

ところが、IE5.5(過去互換モードの IE6も)はこうじゃった。

  • text-align: center; /* for インライン要素 & ブロック要素(※共に包括要素に指定) */
  • margin: 0 auto; /* 知らない子ですね */

.wrapper に「margin: 0 auto;」を指定したところで、左寄せのままびくとも動かない。
しかし、その包括要素に「text-align: center;」を指定すれば、これが仕様とばかりにセンタリングされる。

悩みに悩んだエンジニア達が考えついたのは、こんな方法じゃった。

>> 続きを読む

カテゴリ:
CSS

:before、:after 擬似要素で生成した要素をスマートにクリアする。

以前、レスポンシブ案件で「そういやどうすんだ?」って調べたのでメモ。

例えばレスポンシブ案件で、PC版ではフキダシに口があるけど、スマホ版には無いよ、なんて場合。
PC版にはcontent: "";でフキダシ口を生成して表示、
スマホ版ではcontent:normal;を指定し初期化、要素(フキダシ口)の生成がされないようにする。

>> 続きを読む

カテゴリ:
CSS