タグ「ie6」の一覧

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

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

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

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

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

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

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

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

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

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;を指定する方法がありますよね。えぇ。

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

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

最近のブラウザで使えそうなCSSハック

使う機会は滅多に無いんだけど、知識として知ってないと困ったりしたので、取りあえず現在主流だろうブラウザのハックを自分のまとめ用に。

実際の状況を確認出来るように、デモページもご用意しました。
必要あるか分かりませんがダウンロードも出来るようにしときました。
拡張子がshtmlとかなってるので、htmlにして下さい。

フロートボックスが並んだ時の右端のがカラム落ちしない方法みたいなのとIEのコメントバグ

タイトルが長い…

サイトやブログの価値を調べる10の指標とツール|前向きストラテジー
10番目のでこのブログを調べると泣きたくなるくらい安いけど、ボクは頑張ろうと思った今日この頃、皆様暑さにバテていないでしょうか?ボクはしっかりバテてダレてます。あんまり仕事してま…(加藤さまに給与減らされるので自重しました)

さて、そんな訳で本題ですが、下記みたいなレイアウトの時のお話です。
SampleImage 1

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

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

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

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

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

IEバグ:img要素などの置換要素を含む行の前後では、line-heightが指定した値より小さくなる

行間を指定しているにも関わらず、imgなどの置換要素が含まれると、WinIEでline-heightで指定した値より小さくなるというバグ。
line-heightの値があまり大きくなければさして気にはならないのですが、line-height:200%など多少大きめに指定している場合だと、このデザイン崩れがやっかいです。

IEバグ:peek-a-booバグ

  • バグ

WinIEの動作確認をしている時に、時々表示が違うってことありませんか?

ボクはソレが結構発生したりして、原因が分からず悩んだりする事が多々有ります。
IEにバグが多すぎるってばそれまでですが、それにしてもIEはよくハメてくれる…

現在仕事で組んでいるサイトがあるんだけど、ソレも時々表示がおかしくなったりして、納期との戦いだったりする昨今。

そんな中、ふと読んでいたブログにpeek-a-booバグなる記事が書かれていたので、今更ながら「あ!」
と思わされました。

びっくりするくらいタイミングが良かった。

ちょっと発生条件が分かってませんが、WinIEだけ読み込み時にボーダーが出たり消えたり、背景がスクロールしたら消えちゃうとかそういうバグにハマってしまったら、
height:1%;
のように、高さを指定して上げる事で解決するそうな。

IEは、高さを固定しても内容物にあわせて自動的に高さもあわせてくれるので、そこを利用して回避します。

そうなると当然、IE以外のブラウザでは高さが固定されてしまうので、子セレクタを利用したハックやら、アンダースコアハックやらで対処しておかなければなりません。


IEちゃんは、ホント。。。もう、ねぇ?

頑張って!!

参考サイト:http://edo-freiheit.sakura.ne.jp/eblog/

IEバグ:marginの値が指定値より大きくなる

  • バグ

大抵のCSSバグは、回避法が有るので何とかなるのですが、回避法が特に存在していないバグの場合非常に困ります。
最近の仕事で、IEバグでは比較的発生しやすいIEバグが起こったのでメモとして記しておきます。

floatで左右どちらかに寄せているボックスに、marginの値を指定するとIE5.x/IE6の環境下で、指定値の2倍程度のmarginが設定される。


大抵の場合はpaddingで代用出来るのですが、今回のケースではdivなどのボックスに対して指定せず、h3などのblock要素に直接floatを指定し、marginで調整しようとした際に発生。

該当のh3には背景画像が指定されており、テキストの位置をpaddingで調整していたので、marginを指定するしか無く、バグが発生しました。
対応方法でいくつか候補はあったのですが、今回はアンダースコアハックで対応。

divを追加して対応という方法も勿論あるのですが、バグ対応の為に本来だったら必要の無いdivを増やす事に抵抗を感じ、ハックで対応しました。

↑上に行くよ