Happy Swing

先日、仕事でHTML4.01 Transitional＋CSSでコーディングしていたところ、position:absolutを指定したボックスの中にある要素が、Windows IE6でズレて（飛び出て？）表示されるというバグがありました。

3つのボックスに「position:relative」をかけて、その子要素をabsoluteしてたんですよ。で、3つのボックスを横並びにしたかったので「float:left」をかけてみたら・・・なんと！3つ目のボックスの中の子要素の最後の一つが、CSSが外れたかのように左下に表示されちゃったんです。 どんな感じかというと、

こんな感じ。これが、IEだけで起こるんです。FirefoxやらOperaはオッケー。意味不明。
ためしに、枠外に飛び出てしまう要素に「border」を入れてみたけど、フツーに本来あるべき場所に枠が。でも、中身は左下。・・・なんじゃこりゃ！？ということで、調べてみました。

久しぶりにCSSネタを。
クライアントから「IE7でフォームのテキストフィールドが突き抜けるんですけど・・・」と言われた。
とりあえず、IE7で確認してみると、崩れてない。
まさか！と思って、会社に数台しかないVistaを借りて確認してみたら、ものの見事に突き抜けてました＾＾；
というわけで、急遽IE7のみをハックすることに。
せっかく調べたので、IE7のハック方法を自分のメモのために残しておきます。

GIGAZINEさんに、「Internet Explorerを一行でクラッシュさせてしまうコードが登場」という物騒な記事が載ってました。またセキュリティホールを突いたコードなのかな？と思ったら、意外な一行でした。

それは・・・

久々に仕事でBlogをコーディングしていたら、これまた困ったことが起こりました。
その問題というのは、

【URLを枠内に収めるように強制改行させる】

というもの。
そもそも、URLというのは一つながりの「単語」として認識されてしまうので、途中で改行されることは許されない、という前提があります。
なので、WinIE6はともかく、モダンブラウザと呼ばれているFirefoxやOperaなどだと、ボックスの幅を突き抜けてしまって悲惨なことになってしまいます・・・
でも、そんなこと言われて「はい、そうですね。仕方ないですね」で済むわけがありません。改行しないといけないんです。枠に収まらないと怒られるんです！
というわけで、強制的に改行させる方法がないか、探してみました。

CSSでコーディングしていると、ぶち当たる壁が「ブラウザの違い」。OSで違うのはまだしも、ブラウザ毎にも若干表示が変わります。
大別すると、「Win IE6」「Firefox Opera」「Mac IE5.x」かな・・・まぁ、ほとんどは同じように表示させられるんですけど、どうしても難しいのがテキストフォント。
フォントサイズはどうしてもOSやブラウザで異なってきてしまいます。WinXPとMacで表示されるフォントが違うっていうのがやはり一番大きいのですが、それ以上に厄介なのが「Safari」の存在。
「Safari」に使われているフォントが、どうしても他のブラウザと比べると一回り大きいフォントになってしまうんです。
そこで、Safariだけを除外するハックを探しました。

会社で時間があったので、ひさびさにZenGardenを見てました。
すると、そのうちの一つで「background:transparent」と指定しているものがありました。

・・・transparent？って、なに？？
というわけで、さっそく調べてみましたー♪

GIGAZINEさんで、「CSSでWii風のシンプルで角がまるいボタンを作る」という記事があって、早速見て見ました。どうやら、2つのタグ1一つのイメージ、そして1つのCSSファイルで実現できる！とのこと。一体、どんなソースなんだろう・・・

CSSソースを読んでいて気になって調べたのが、"_width:200px;"というもの。
widthにアンダースコアってなんだ？？と思って、色々見ていたら、どうやらこれは「アンダースコアハック」というらしい。スターハックとかは知ってたんですけｄ
すいません、無知でした。いまさら知りました。

久しぶりにコーディングしたんですが、久しぶりすぎてちょっとCSS忘れてますね・・・コーディングのスピードも遅いし＾＾；
で、これがまたMacIE5も見れないといけないって事で確認してたら、MacIE5だけフォントサイズを設定しなおさないといけないところが出ちゃいました！IE用のハックを使ったらWinIE6まで換わっちゃったので、MacIE5だけに指定できるハックを急遽ググってみました。