IE6/7/8でもCSS3の角丸、ボックスシャドウ、グラデーション、マルチバックグランドなどを使えるようにするbehaviorスクリプトを紹介します。
IE6/7/8でもCSS3の角丸、ボックスシャドウ、グラデーション、マルチバックグランドなどを使えるようにするbehaviorスクリプトを紹介します。
内閣官房情報セキュリティセンター(NISC)は2010年6月17日、各府省庁に対して、Internet Explorer 6(IE6)からInternet Explorer 8(IE8)への移行を推奨したことを明らかにした。 IE6は、2001年8月にリリースされたWebブラウザー。最近では、セキュリティや互換性の問題が頻発。例えば2010年1月には、IE6だけを狙った攻撃が確認されている。このためマイクロソフトなどでは、IE6のユーザーに対して、最新版IE8への移行を推奨(図)。グーグルなどのWebサービス提供者は、IE6への対応を順次打ち切っている。 しかしながらNISCによれば、中央省庁の中には、バージョンアップすることなくIE6を使い続けているところがあるという。組織内のシステム(Webアプリケーション)を、IE6用に構築しているためだ。IE8に移行するとなると、既存システムがIE
DiaryTechnology CSSでmin-heightをクロスブラウザにする最も簡単な方法『Easiest cross-browser CSS min-height』 CSSでmin-heightをブラウザに関係なく使いたい。 そんなあなたにおすすめなのが、『Easiest cross-browser CSS min-height』。CSSでmin-heightをクロスブラウザにする最も簡単な方法だ。 There are still enough folks using IE6, unfortunately, and it doesn’t support the min-height or min-width CSS parameters. This has caused the invention of a number of different hacks and browser
CSSレイアウト初心者がまずぶつかる壁がおそらくこのバグだと思います。 まずはサンプルソースを見てみて下さい。 サンプルをダウンロード。 HTML <div id="container"> <div id="leftContents"></div> <div id="rightContents"></div> </div> CSS #container { width: 500px; height: auto; } #leftContents { float: left; width: 180px; height: 200px; background: #80A852; margin-right: 10px; margin-left: 10px; } #rightContents { float: right; width: 290px; height: 200px; backgroun
という記事がその昔 Ajaxian に挙がっていたので自分のメモとして残っていたモノを、そろそろ時期が来たかと言うことでこちらに再掲。 http://ajaxian.com/archives/10-cool-things-we%e2%80%99ll-be-able-to-do-once-ie6-is-dead-and-a-few-we-cant 子セレクタ(child selectors)が使えるようになる。 孫以下を除く直の子にだけ適用するセレクタが使えるようになります。 #bodyMain > p {} ul > li 24bit PNG の機能を全て使えるようになる。 アルファチャンネル付きPNGがネイティブで使えます。アンチ付き角丸を背景色毎に用意する必要が無くなります。 属性セレクタ(attribute selectors)が使えるようになる。 感覚的にいって class の3割
anthonyshortのエントリーから、クロスブラウザのためのHTMLとCSSのテクニックの紹介です。 How to get Cross Browser Compatibility Every Time 簡単な意訳なので、詳細やキャプチャは上記エントリーを参考ください。 サマリー doctypeはstrictを使用し、正しいHTML/CSSを使用してください。 スタイルをリセットするスタイルシートを使用してください。 Firefoxでのレンダリングのために、テキストのスタイルシートに「-moz-opacity:0.99」を指定してください。 Safari用には「text-shadow:#000 0 0 0」を使用してください。 画像のリサイズをCSS/HTMLで行わないでください。 全てのブラウザでフォントのレンダリングを確認してください。 「Lucida」は使用しないでください。 テキ
アルファ画像を扱うalphafilter.jsライブラリ IE6でアルファ画像(透過png)が使えないことにより、コーディングの作業量が大幅に増します。 そこで、IE6で透過pngを扱うjsライブラリを作ってみました。 設定は簡単、head要素内に条件付きコメントを利用してalphafilter.jsで読み込むだけ。 読み込みを高速化させるためdefer属性をの記述を忘れずに行ってください。 <!--[if lte IE 6 ]><script type="text/javascript" defer="defer" src="./alphafilter.js"></script><![endif]--> 透過にしたい画像にclass属性でalphafilterと入れるだけで、なんとIE6でも透過画像の使用が可能になります。 <img src="./sample.png" class="a
画像の貼り付け方を指定します。 設定値はcrop、image、scaleとなります。デフォルト値はimageとなります。 ・cropはそのまま貼り付けます。 ・imageは要素のwidth、heightの値に関係なく要素を画像の大きさに合わせます。 ・scaleは要素の大きさに合わせて画像を拡大縮小。要素の大きさが画像のサイズ以下ならば指定したwidth、heightに合わせますが、要素サイズの方が大きい場合には、拡張して表示します。
このページはIE7で致命的なエラー出るという情報を頂き、暫く公開を中止して 修正予定のまま放置しておりましたが、ようやく修正致しましたので再び公開します。 PNGのアルファチャンネルによる 透過(半透明)もサポートされていないインターネットエクスプローラ6。 (GIFと同レベルの256色での単色透過は問題ありません) バージョン7でようやく半透明PNGがサポートとなりましたが、他のブラウザと比較して 余りにも遅れすぎ…。 更にIE7は、Windows Vista、Windows XP、 Windows Server 2003だけですね。これらより古いWindowsには使えません。 そして2006年末の現時点では、まだまだIE6 のユーザーが圧倒的に多いようです。 WEBサイトを作る側からすれば困った問題ですね。うかつに透過PNGを使ってしまうと、 IE6ユーザーから見ると「透過失敗してる…
透過PNGに対応したロールオーバーのサンプル。メニュー画像は半透明になっており背景が透けている。IE6を含むクロスブラウザーに対応している(画像クリックでサンプルページを表示します) ロールオーバーの基本部分をおさらい 「透過PNG対応」といっても、IE6以外のブラウザーでは単に透過PNG画像を用意するだけですので、通常のロールオーバーと変わりません。まずは前回のおさらいをかねて、通常のロールオーバーを作成しましょう。以下のようなHTML/XHTML(以下、HTML)を用意します。メニューはul/li要素で記述し、img要素のclass属性には「rollover」を設定します。ここでは、次のような半透明の透過PNG画像を用意し、img要素のsrc属性に指定しています。 ▼サンプル01(HTML部分) <ul> <li><a href="#"><img src="images/jquery.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く