ウップス!!なかわけ

よく使われるCSSの裏技です。名前は「clearfixハック」！

主にWindowsIE6が対象です。

これは下の英語文を訳すと「.clearfixクラスは（内側の）フロートされた要素の周りをブロック要素で囲っているクラスです。」ということです。実際使ってみるとよく分かりますが、よくfloatしているブロック要素を囲っているブロック要素が高さを指定しないとつぶれて表示されてしまうことがありますが、その問題点を回避する裏技的なクラスです。

必見です。

/* .clearfix class wraps enclosing block element around inner floated elements */
.clearfix:after
{
content: " ";
display: block;
visibility: hidden;
clear: both;
height: 0.1px;
font-size: 0.1em;
line-height: 0;
}
* html .clearfix { display: inline-block; }
/* no ie mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* */

こんにちは。なかわけです。

先日「JavaScriptの文字コードには気をつけろ！」という記事を書きましたが、CSSにも同じようなことがいえます。今日その問題にぶち当たりました。

javascriptの経験があったためか、すぐに気がつき大した時間の浪費はありませんでしたが・・・。

そもそも"Internet F Explore"の仕様がいけなかったんですけどねw
（FはなんのFか適当に想像してください）

対応策としましては、文字コードが変更できるテキストエディタ（たとえば、「秀丸」とか）で開いて、別名保存するときに変更したい文字コードを設定すればおｋ。もしくは、cssファイルの１行目に、

@charset "utf-8";

と入力。もちろん、サーバ・ドキュメントに合わせた文字コードを入れてね。あ～あ、つまんなぇ。

こんにちは、なかわけです。

IEのCSSバグ（ハックなのか・・・？）を発見しました。これは、ヒドイ。。かなり苦しんだ。2時間苦しんだ・・・。



セレクタ {/*日本語のコメント*/
プロパティ: 値;
プロパティ: 値;
}



上記の赤字の部分がバグを引き起こす。
セレクタの{（始めカッコ）の後に日本語文字（つまり2バイト文字）でコメントを書くと、IE6でこのセレクタの以下のプロパティが無効になってしまいます。cssハックとかいいますが、これは明らかにバグです。
というか、ここにコメントくらい書く人なんてわんさかいるはず！IEがちょくちょく更新するせいなのか？
それとも、作業してる環境（サーバ・ファイル・拡張子・文字コード・HTML構造・・・など）のせいなのか？

とにかく、赤字部分のコメントをはずしたら問題なく表示された。なんだこれ、わからないよ。だれか～～!!

こんにちは、なかわけです。

先日の『IEのCSSバグ「これはなにハック?」』の原因がわかりました。やっぱりこれです。

文字コード!!!

ちゃんとhtmlファイルと同じ文字コードで（このときはEUC-JPでした）で保存すれば大丈夫でした。

はー。かなり苦しめられます、こいつに。そもそもこのサイト「oops!nakawake」も文字コード処理がうまくできてなくて時折文字化けするし。文字化けさんには気ぃ使うわ～。

こんにちは、なかわけです。

さて、今日のIEのバグ・・・

floatを含むブロック要素に謎のマージンが発生する

です。現象としてわかりやすく紹介しているサイトがありましたので紹介します。サンプル・対処法も書いてあります。

▼clearを指定した要素ではフロートに対して上マージンを設置する

ただ、今回なかわけが遭遇したバグはこれに近かったんですが、別物でした。いろいろやってみましたがいい方法が見当たらず、結局謎のマージン（実際にはパディングpaddingだったのかな）問題のブロック要素に高さheightを指定して解決しました。あんまいい方法じゃないな。

もううんざりです。今日もIEのバグに悩まされ時間を無駄にしました。たぶんIEに悩まされた時間を合計すると夏休みと同じくらいになりそう。はぁ。
IEなんて無くなっちゃえばいいのに・・・。