ブラウザ関係

IE7のために隣接セレクタを活用してみる

たまには、ゆるめなCSSの話題でも。

対象ブラウザがIE7からになる事で、活用できるセレクタの幅はわりと広がります。
普段、IE6の対応が必須となってると、使ってないセレクタっていざ使おうとしても活用方法が分からなかったりしますよね。うん。

と言うことで、隣接セレクタ (E + F) を使った実用的？かも知れないネタでも。

いままでありがと、IE6。をした方が良いかも...な色々。

ホントに長い間王座に君臨し続けた Internet Explorer（以後：IE）6 ですが、制作者の願いとしては大半の人がIE6 の使用を止めて欲しいと願っているかと思います。
ボクもその一人なんで、以前「IE6で閲覧すると。」なんて記事も書いてます。

IE6を使っている人が他のブラウザに移行しない理由の一つとして「移行する必要が無いから」ってのが大きいのかなーと個人的には思います。

IEのバージョンを上げると社内のシステムが～とかは、社内のシステムを閲覧する時用ブラウザとして使えば良くて、別のブラウザを使うことは出来るんじゃないかな。

まぁ大きな会社は、何かインストールするだけでも許可が必要とか色々事情は有るんでしょうけど、それでも乗り換える必要がやっぱり無いんでしょうね。
だって、普通にサイトを見るだけならIE6でそんなに困らないですからね。

ここで言ってる「移行する必要」ってのは、根本的にIE6だとダメぐらいな勢いの状態を指してて、他のモノで時代の流れによって使えなくなったモノなんて幾らでも有るんですよね。
ポータブルプレイヤーなんてまさにそんな感じで、カセット → CD → MD → MP3 みたいな。

IE6はもう9年現役ってどんだけ長いんだろうと。
他のモンで9年も持っているのかどうか。

でも、これらのモノってマジで使えない状態になってしまったからみんな買ってるんだろうけど、IE6はマジで使えない状態じゃないので残ってる気がする。
移行や買い替えの中では、ブラウザなんて無料だし敷居としても決して高くないのに残るわけですから。

と、まぁそんな訳で、IE6から別のブラウザに乗り換えるなり最新バージョンのIEを使ってもらうなりする為の理由付けとか説得材料的なのに使えそうな事を色々拾ってきたりしながら自分なりの意見を書いたりしてみました。

IEだとMT5のフッターが動くのを何とかするメモ

IE7（6も？）で、MT5かMT5.01のエントリー画面とかブログ記事の一覧あたりで特定の動作をするとフッターが動いて、メイン部分に重なってしまう現象が有る気がするんですけど、これってボクだけでしょうか・・・

良く分かんないけど、ちょっと困るのでそれに対しての対処方法をメモ。

IE6で閲覧すると。

hamashunさんがTwitterで、

IE6を使って閲覧すると右上に『アナログ』って出るようにしようぜ。

って言ってたので、CSS HappyLifeでやってみた。
ボクが出来る2008年最後の大仕事でした。えぇ。

使いたい方は是非是非。

ちなみに、ボクが使った画像はコレです。自分のモニタで出るやつを参考にしました。
ご自由にお使いください。
お使いのブラウザはanalogです。

IE6だけに表示させるにはどんなやり方でもいいっすけど、手っ取り早いのだったらハック使ってやるのがいいかと。

.analog {
	display: none;
}
* html .analog {
	display: block;
	position: absolute;
	top: 10px;
	right: 30px;
}

こんな感じで。
であ。

Vista（64bitも）で動く、IETesterを入れてみた

キャプチャ：IETesterHome待ってました。心底待ってました。

本気で待ってました！
Vistaの64bitでもIE6とかがチェック出来ちゃう素敵なアプリを！

これ一つで、IE5.5、IE6、IE7、IE8 beta1 の確認が出来てしまうんです。
インストール方法もとても簡単で、Download IETester v0.2 を押してダウンロードして実行。

後は、OK押して進んでいけば完了！

基本的なレンダリングチェックには問題ないっぽいですが、まだアルファ版なので、ちょこちょこバグがあるっぽいです。

  • リサイズした時に内容が消えてしまう時がある ( 次バーションで修正予定 )
  • Previous/Next のボタンが動作しない
  • Focus が動作しない

まぁすぐに修正されるんじゃないでしょうか。

続きは、IETesterの使ってみての簡単な感想と、雑記です。

IE6のfloatしたボックスのmarginの値が2倍になるバグ対策の件

IE6で、floatで指定した値と同じ方向にmarginの指定をすると、指定値の倍程度になってしまうっていう有名なバグ。

その対策として、marginの代わりにpaddingを使うとか、親要素でpaddingを取るとかあったりしますけど、一番手っ取り早い感じで、問題が無さそうなdisplay: inline;を指定する方法がありますよね。えぇ。

何となく他のブラウザに影響ないの！？って思ってしまうかもですが、
こういう矛盾しちゃいそうな指定がされた時はどーしたらええの？っていうのがちゃんと仕様で決まってるので仕様通りに動いてくれるブラウザさんなら問題ないわけです。

そうなんですよ。仕様通りにね、動いてくれるブラウザさんならね。

Opera9 input type="button"のvalue値の消し方

ハイレベルCSS実践講座 東京2008年1月20日 | サイバーガーデンbizに行ってきました。
どんな感じかはbizを見ていただくとして。

内容としては、いちおう大半が復習で、やっべ全然知らない。。。っていう状況はほとんど無かったんですけど、Operaでinput type="button"のvalue値の消し方が知らなくってやるせない気持ちだったのですが、参加者の方もあんまり知ってる人は居ないと思われたので、世間の認知度もあんまり無いのかな？

ボクの場合、今までinput type="image" でやってたので、こういう状況になった事が無かったんですよ。えぇ。

まぁ言い訳はいいとして、そんな訳で、方法をば。

IE7のborder-styleの不思議

ジャンプで連載してるP2!がすごく好きなのに、非常に悲しい知らせを聞き、何とかしたいと切に願う今日この頃。
情報元：P2!を応援しています

さて本題に。
border-bottom: 1px dotted #000;とかって書くと、IE6だけ破線の感覚が広くなってしまうじゃないですか。
というか、dashed を指定したときと同じになるアレです。

アレが嫌で、dotted でいけそうなデザインでも背景で切ってたりした訳で。

んで、IE7はなおってるーって喜んでたんですけど、solid で2px以上なborder があると、IE6と同じ破線になってしまうっぽいっていう事にいまさら？気づきました。

サンプルページとダウンロードは以下より。

IEの様々なバグの真相らしきもの

IEには様々なバグが報告されていますよね。
もうコーダーからしたら勘弁して下さいって泣きが入りそうになるくらいに...

背景色が指定された要素内でfloatがある時、要素内の文字が消えるとか、floatに後続するmarginの値が無視されるとか、widthを指定しているとボックスの中身にfloatしている要素があっても、自動的に高さが伸びるとか。
こういったIEのバグに有効な手段として、IE6まではheight:1%を指定する事で回避したり、IE7でもwidthを指定して回避したりと色々やってると思います。

その他、IE独自拡張のzoomを使った方法なんかもあります。

今まで理由とかは分からないけど取り合えず解決するんだって事で、widthやheight、zoomを指定しておけばいいんだ。
と認識していましたが、つい先日ちょっと気になる内容をみつけましたのでご紹介。

↑上に行くよ