CSSの最近のブログ記事


IE6やIE7初めに表示した時は問題なくても、スクロールしてまた戻ったりすると、背景が消えてしまうことがあります。

これ、IE6やIE7にあるバグだそうで、floatプロパティを指定した要素やその子要素に背景を指定した場合に起こるそうです。

背景を指定する要素にwidthプロパティを指定してあげることで回避できました。

Firefoxでも背景がでなくなるバグ?あったような気がしますが、それもwidthプロパティで改善できたような...うるうろ覚えです。

普段あまり意識せず使っていたclearfixで、適用したボックスの下にマージン(スペース)ができていたことに気づきました。

調べてみると、clearfixにもいろいろな見解や方法があるんですne...
私が使っていたものは、少し古いことも分かりました。

当面、対象としたいブラウザや、どのくらいまでスペースを許すかなどケースバイケースで使い分けていこうかと思います。

ボックスの内容を半透明にする場合、スタイルシートを以下のようにすることがありますが

.semitra-box {
	filter:alpha(opacity=80);
	-moz-opacity:0.80;
	-khtml-opacity: 0.80;
	opacity: 0.80;
	}

IE6やIE7では、filter:alphaが効かない事があります。

半透明にしたいボックスに高さ(height)または幅(width)を指定してあげると反映されます。

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を管理画面から編集する際、ソースコードが一部分消失するような場面が何度かありました。

RSS

楽天おすすめ

Tag Cloud

SEO対策

Sponsor Site

Category

Archives

Amazonおすすめ

Copyright © 2008 Trendspotting All rights reserved.