IE 6とIE 7のためのCSSハック16選（1/3） - ＠IT
有限会社タグパンダ 喜安 亮介 2009/11/17 Webブラウザごとのレンダリングエンジンの違いにより起こるレイアウトの表示ずれ問題に泣かされるWebデザイナのために、Webブラウザごとに使えるかどうかの表を交えながら問題を解決するためのCSSハック＆フィルタTipsをお届けします（編集部） Webブラウザ別CSSハック一覧表 前回の「IE 6で泣かないための、9つのCSSハック」では、仕様通りの正しいコーディングを行っているにもかかわらず、Internet Explorer（以下、IE） 6で見ると、レイアウトがズレてしまうなどのさまざまな問題を解決するための9つのテクニックを紹介しました。 今回は、IE 6とIE 7のためのCSSハックのテクニックを下記に分けて紹介します。 IE 6をハック（IE 6のみに効く、もしくはIE 6のみに効かないハック） IE 6のみに効くハック スタ
ウノウラボ Unoh Labs: IEでlabelの子要素に画像を含める
yamaokaです。 HTMLのフォームでチェックボックスやラジオボタンを扱う場合、 対応したlabel要素を用意することが多いと思います。 <input type="checkbox" id="foo" name="foo"> <label for="foo"> キャプション </label> わざわざ小さなチェックボックスやラジオボタンを狙ってクリックする必要がなくなり、 labelタグで囲まれたキャプションの部分をクリックすればよいようになります。 しかし、次のような場合どうでしょう。 <input type="checkbox" id="foo" name="foo"> <label for="foo"> <img src="bar.gif"> キャプション </label> label要素の中にimg要素（画像）が含まれているような場合を考えてみます。 もっと具体的にいうと、ユー
JavaScriptの最適化について、code.google.comの記事の適当訳 - それ図解で。・・・tohokuaikiのチラシの裏
GoogleがWeb全体のスピードアップにいよいよ本格的に着手, 一社だけではできないと強調 からリンクのあった、 http://code.google.com/intl/ja/speed/articles/optimizing-javascript.html が日本語かと思ったら日本語じゃなかった・・・・。 いやー、意外とというか文字列については、全然知らんかった。 Closureって便利だし、「おぉ〜俺って使ってるジャン」みたいな気になれるからついつい使っちゃうんだけど、高コストなのね・・・・。反省。 ということで、超適当翻訳。どっかの誰かが書いてるかも。 前おき 著者: Google Chromeのエンジニア Gregory Baker, Software Engineer on GMail & Erik Arvidsson 推奨される経験：JavaScriptの実践的な知識 クライ
IEでJavaScriptを動かす際のメモリリークの調査方法:phpspot開発日誌
Screencast: JavaScript Memory Leaks in the Windows IE Browser IEでJavaScriptを動かす際のメモリリークの調査方法を紹介するスクリーンキャストが公開されており、分かりやすく調査方法について紹介されています。 3分ぐらいの動画になっています。 メモリリークの調査を行うのは、Process Explorer というソフトを使っているようです。 Process Explorer を使えば、Spy++みたいな感じで、調べたいウィンドウ部分にドラッグ＆ドロップして、該当ウィンドウのメモリサイズについて調査できるみたい。 具体的な操作方法については動画を見れば分かります。 メモリサイズがあがっていく様子を捉えた図。 これは知っておいたほうがよさそうですね。
[CSS]外部スタイルシートの指定は@importとlinkでどちらがいいか
外部スタイルシートの指定は@importとlinkでどちらがいいかと、書籍「ハイパフォーマンスWebサイト ―高速サイトを実現する14のルール」の@importはパフォーマンスに悪影響を与えることについてのフォローアップを紹介します。 don't use @import 内容は、IEでは@importで外部スタイルシートを指定すると、パフォーマンスに悪影響を与えるので使用しないでください、というものです。 下記は、外部スタイルシートを@importとlinkを組み合わせて、それぞれのパフォーマンスを比較したもので、キャプチャはそのサイトのものと、参考に当環境でIE7/Fx3(XP)を検証したものです。 @import @import 2つの外部スタイルシートを@importで指定。 <textarea name="code" class="html" cols="60" rows="5">
[IE] Internet Explorer 8 ドキュメント互換性モードの指定について
IE6のドキュメントタイプで表示が変わる互換性モードに頭を抱えたWeb業界の人は多かろうと思いますが、IE8で更に上位版が出たそうです。 でもIE6で悪行を働いた標準・互換モードの変更動作とは違い、IE8で導入されたドキュメント互換性は、 IEがページを表示する際に使用する特定のレンダリングモードの選択を可能にするもので、従来のDOCTYPEの変わりに 新しくMETA要素の X-UA-Compatible により操作が可能に。 簡単にまとめると IE8だと表示が崩れる…IE7なら崩れないのに…orz ▼ METAタグでIE7モードで表示するよう指示 ▼ IE8がその指示に従ってIE7っぽくレンダリング ▼ ｳﾏｰ(ﾟдﾟ) ということらしい。 その場合のMETAタグは次のようになる（Emulate IE7 互換性モードを指定） <meta http-equiv="X-UA-Compatib
![[IE] Internet Explorer 8 ドキュメント互換性モードの指定について](https://cdn-ak-scissors.b.st-hatena.com/image/square/8d71ff5111e05619a10d29bb40d7aebaa75c8fbc/height=288;version=1;width=512/https%3A%2F%2Fs0.wp.com%2Fi%2Fblank.jpg)
IE6にPNG画像のアルファチャンネルを効かせる方法のまとめ | Blog hamashun.com
最近はアルファチャンネルを含むPNG画像を利用したサイトが増えてきたように感じます。 2008年9月号のWeb Designing誌でも特集が組まれたりと、関心も高まっているようです。 ただ、そこで問題となるのはIE6のアルファチャンネル問題。 何らかの手段でこれを解決する必要があります。 少し前の仕事でこの問題を解決する必要があり、いくつかのライブラリを試してみたので、それをまとめてみます。 なお、img要素ではなく、CSSの背景画像で使用する場合として検証しました。 img要素にだけ適用したい場合には、もっとシンプルな方法があるかもしれません。 概ね共通する事 標準準拠のCSSのみでは不可能 IEの独自拡張の、filterプロパティを使う必要があります。 CSS内に記述する方法やhtcファイルを使う方法、JavaScriptを使う方法でも、結果的にはこのfilterプロパティのAlph
Kazuho@Cybozu Labs: JavaScript の文字列定数でエスケープが必要な文字
IE、 Firefox、 Safari ともに ECMAScript の仕様を満たしていません。IE6 は ECMAScript の仕様に対して上位互換だと言えるでしょうから、実質的に問題を抱えているのは Firefox のみ、ということになるのでしょうか。JSON を使う際には、注意が必要、と。 Firefox に関して言えば、 (Control Character があるとエラーになるのではなく読み落とすという性質からして) 仕様ではなくバグだと考えるのが妥当なのかなと思いました。 参考: テストコード 10:28 追記: NUL 文字について表に含めるのを忘れていたので追加しました 10:48 追記: Safari を追加 2009/02/17 追記: Firefox のバグは 2008 年 8 月に修正されたようです (ChangeLog の3.147)
[CSS]IE6でよく遭遇する6つのバグとその解決方法 | コリス
CSS Trickのエントリーから、IE6でよく遭遇する6つのバグとその解決方法の紹介です。 IE CSS Bugs That’ll Get You Every Time ボックスモデルのバグ マージンが二倍になってしまうバグ min-width, min-heihgtと同等の指定 Stepdownバグ hover擬似クラスをa要素以外にも対応 透過PNGを透過表示に対応 ボックスモデルのバグ <textarea name="code" class="css" cols="60" rows="5"> div#box{ width:100px; border:2px solid black; padding:10px; } </textarea>
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
