CSS の最近のブログ記事

IE6や5.5でfloatしたボックスがおかしい(倍になる)件。

今までアンダーラインハックとかして無理くり調整していましたが、display: inline;入れると解消できるそうです。

なんでやねん。

どちらも納得いかない回避方法ですが、こっちの方が楽だし問題も起きにくそうなので覚えておこうかと。

ボックスを入れ子にしたり、floatしてレイアウトしたりすると、IE6だけボックス内のテキストの終わり数文字が複製されてとんでもないところに表示されてしまうことがあります。

色々いじってみましたが、原因は良く分からず、これなら絶対大丈夫って書き方しても改善しないことがありました。

フルスクリーンFlashでwidthとheightを100%にした際に、IE以外のFirefoxなどのブラウザで高さが100%にならないバグ。

これは、親コンテナの高さを 100% に設定することで回避できます。

<style>
   html, body { height: 100%; }
</style>

doctype を削除することでも解消するらしいので詳しくはAdobeで...
高さ100% の Flash のバグについて

Webサイトをセンター合わせのデザインにする場合、例えば

<div id="container">コンテンツ</div>

のをセンタリングする場合、スタイルシートは

#container {
    margin-left: auto;
    margin-right: auto;
    width: 760px;
}

などとすれば、IE7、Firefox、Operaなどは問題なくセンターリングされますが、IE6ではブラウザのバグによりセンタリングされません。

忘れないようにメモ

スタイルシートで2段カラムや3段カラムのレイアウトをおこなう際、親ボックスの中の子ボックスをfloatしますが、そうすると親ボックスに指定してあるはずの背景画像が表示されなかったりすることがあります。

散々なやんで色々調べた結果、clearfixハックの存在を知り、この問題を解消することができました。
他の部分でも、floatを使うことがありますが、brや空のdivにclearを指定したりしなくて済むので、それ以降なにかと使うことが多くなりました。大変便利なテクニックですね！

Movable Typeを久しぶりにいじったのとver.4を始めて扱ったので慣れるまでに大変でした。

横着してデフォルトをいじってのデザインだったので、スタイルシートでだいぶ苦労しました。人の書いたCSSだとルールを把握するまでに時間がかかるのと、恐らくデフォルトのデザインもベースを改変してのもののようで、スタイルを上書きしているような点が何点もみられた。

全部整理すれば、半分くらいのコードになりそうですが、そこはまた今度ということでなんとか見栄えだけは整えるところで一旦落ち着こうと思っています。

それと、Movable Typeの管理画面、大分扱いやすくなったような気がしますが、テンプレートやCSSを管理画面から編集する際、ソースコードが一部分消失するような場面が何度かありました。