IE6/IE7/IE8/IE9のCSSハック
IE6/IE7/IE8/IE9と他のブラウザを振り分けるCSSハックです。IE9はまだベータ版なので有効にならなくなるかもしれませんがとりあえず。 →IE9も正式版で確認済みです。 １．IE6/IE7/IE8/IE9と他のブラウザを振り分けるCSSハック 以下の順番でプロパティおよびセレクタを記述してください。 body { color: red; /* all browsers, of course */ color: green¥9; /* IE8 and below */ *color: yellow; /* IE7 and below */ _color: orange; /* IE6 */ } body:not(:target) { color: black¥9; /* IE9 */ } IE6：プロパティの先頭にアンダースコア「_」を付与 IE7：プロパティの先頭にアスタリスク
IE6などのクロスブラウザに強くなる、22のHTML+CSSコーディングの基礎
IE6などのクロスブラウザに強くなる、22のHTML+CSSコーディングの基礎 2011-06-04 Twitterなどを見てると、 「IE6がー！」とか 「IE6,7,8,9、Firefox、webkit系、Operaで同じレイアウトにするの大変」などのツイートをたまに見るので、クロスブラウザでも差が出にくく、効率の良くなるコーディングの基礎を紹介します。 気をつけるHTMLの記述方法 HTMLの記述方法を間違えていると、ブラウザCSSの解釈が変わってきます。 以下のようなことは基本的なことですが大切な事です。 DOCTYPEを書く。 HTMLの先頭にDOCTYPEを入れるようにして下さい。 DOCTYPEがないと、ブラウザ間での誤差が起こりやすい状態になります。 DOCTYPE スイッチについてのまとめと一覧表 (HTML 5 や IE 8 Beta 2 のモードスイッチなどの情報も含
IE6 の float 指定した時の margin バグ回避策 はじめてのブログデザイン
覚え書きです。 CSS でブロック要素に float を指定した際 margin の auto が効かなくなる（左右のセンター揃えが効かなくなる）ので px などでキッチリと指定します。 しかし、IE6 のバグで float を指定した際の margin が2倍になってしまうバグがあります。 なので、IE6 用の有名な CSS ハック（*html）を使用して以下のように回避します。 *html div#hajime { /*IE6用のハック*/ width : 450px; float : left; margin : 10px 5px; /*通常指定の1／2で指定*/ } div#hajime { /*その他のブラウザ用*/ width : 450px; float : left; margin : 10px 10px; } ●結論 IE6 はフロート食べると太るから margin は半
5月のブラウザシェア 、3位にFirefox 4 ‐ IE6が2位へ
4月に引き続き5月もChromeとOpera Miniがシェアを増やした。5月は各ブラウザベンダから新しいバージョンがリリースされた影響で、バージョン別ブラウザの順位が大きく変動している。Firefox 4は順調にシェアを増やして3位を確保。代わりにFirefox 3.6がシェアを減らしている。 シェアでIE6が第2位に復帰した点も注目される。Internet Explorer 6 Countdownは5月におけるIE6のシェアを10.9%としており、Net Applicationsの報告と近い。IE6は長期に渡って下落傾向が続いているとはいえ、依然として10%を超えるシェアを確保し続けている。IE9はシェアを増やしており、5月には世界平均で最終的に12.2%まで上昇。米国に絞れば5月末には17%までシェアが増えていると報告されている。6月のシェア報告でFirefox 4とIE9が上位にラ
Suckerfish Dropdowns - Perciformes!
PERCIFORMES! Welcome to the universe of Perciformes - perch-like fish that include the world famous Suckerfish Hello. You have found an example page for Suckerfish Dropdowns. Under the hood you will find some nice structured HTML, a smattering of CSS and a teensy bit of JavaScript (that's just 12 lines of it). It's lightweight, it's accessible, it's cross-compatible. Suckerfish Dropdowns are broug
ツールチップ｜jQuery plugin｜Ajax｜PHP & JavaScript Room
［CSS］jquery.cluetip.css ［JS］jquery.js v1.2.6、jquery.dimensions.js、jquery.hoverIntent.js、jquery.cluetip.js HEAD <!-- JS --> <script src="jquery-1.2.6.min.js" type="text/javascript" charset="utf-8"></script> <script src="jquery.dimensions.js" type="text/javascript"></script> <script src="jquery.hoverIntent.js" type="text/javascript"></script> <!-- optional --> <script src="jquery.cluetip.js" type="t
[CSS]IEで、min-widthやmax-widthを実現する方法
CSS-Tricksで、IE用に「expression」を使用して、min-width、max-widthを実現する方法がエントリーされていました。 The Perfect Fluid Width Layout デモページでは、最小幅780pxを維持しつつ、最大幅1280px以上になると残りの箇所は背景画像が表示されるようになっています(参照：キャプチャ画像)。 min-width、max-widthの箇所は、下記のように記述されています。 #page-wrap{ background: white; min-width: 780px; max-width: 1260px; margin: 10px auto; width:expression(document.body.clientWidth < 782? "780px" : document.body.clientWidth > 12
IE6用max-width・min-width | Nefert
この記事の情報は「やってみたらできた」というメモ程度の内容＋古い情報です。Javascriptについての知識もあまり持ち合わせていないため、深い考察などもできていません。ご了承ください。 2010/02/10 さすがにメモ程度の内容で検索の上位に表示されてしまう（なぜ……）のはどうなの、ということで記事の改訂をしようと思ったのですが、既にかなり詳しく解説されているページがありましたのでそちらを紹介させていただきます。 ずっと工事中【IE6のmax-widthとmin-widthと、expressionについての覚え書き [CSS, JavaScript]】 ・ ・ ・ 「Nefert」で配布しているテンプレートは、ウィンドウサイズにあわせて幅が変化するリキッドレイアウトを採用しています。 リキッドレイアウトは、表示するウィンドウサイズに合わせて自動的に表示幅が変化するため、画面が大きい環境
複数バージョンのIEを一台のPCにインストールする - ミblog : レビューや日常など
2008-03-28 ソフト（ツール） IE7 いままでIEでバージョン別チェックする場合、メインPCにIE7、サブPCにIE6という風にインストールしていましたが、ローカルで確認するには同じPCに複数バージョン入っていた方が都合いいので、multipleというツールをインストールしてみました。 このように複数バージョンのIEを一緒に並べて比較することが可能です。もちろん一台のPCに入っているので、サイト作成の途中でも確認することができます。 ダウンロード → Install multiple versions of IE on your PC インストール方法 まずは上記ページ下部の Download Multiple IE installer からインストーラーをダウンロード。上記画像の部分にチェックを入れて次へ。 インストールできるバージョンは3.0・4.01・5.01・5.5・6.
My RSS 管理人 ブログ++ IE6 と IE7 を一つのパソコンで共存させる公式な方法
IEの公式ブログ IEBlog で IE6 と IE7 を一つのパソコンで同時に動かす方法が紹介されています。 ※コメントでいただいていますが、日本語版IE7ではうまく動かない可能性があります。後日検証します。 ⇒ 日本語版 IE7 では難しいようです。申し訳ありません。 IE7 RC1をスタンドアローンで動作させる方法 などレジストリを使う方法はいくつかあるようなのですが、IEBlog で公式にオススメしているのは VirtualPC を使う方法。 VirtualPC は仮想PC を別途インストールするわけで「それなら Windows のライセンスがもう一ついるやん！」と思っていたのですが、テスト用に Windows XP SP2 + IE6 が入った無料の Virtual PC イメージが配布されているとのこと。 ただし、VirtualPC のイメージは 来年 4/1 までの期間限定と
ブラウザ別にCSSを条件分岐させる方法
そんな中で、一番のネックになるのが、全てのブラウザは必ずしも正しいCSSを読み込んでくれないということ、つまりバグのないブラウザはないということです。 やっと統一されつつあるものの、ブラウザ独自のものもあって、WEBサイトを構築していく者は、ここに泣かされます。 本来なら、古いブラウザ環境なんか知った事ではない！と思いたいのですが、ユーザビリティーの視点からいくとやはりどのブラウザから見ても、きれいなサイトを表示しないと…と思うのです。 このサイトでも、IE7が出た時点で、IE6は捨てました。 しかし、アクセス解析を見ると、IE6を使っている人がまだ多いのです。 IE6 Firefox IE7 safari の順番です。 Macの環境は、家にはないので対応することができませんが…。 そして、それを基本として、IE6用とIE7用のブラウザ環境に合わせたスタイルシートを作成します。 基本のCS
（恐らく）最も簡単な、対IE用CSSハック術
CSSコーディングにおいて最も邪悪かつ驚異的な存在、Internet Explorer。 どんなに完璧にCSSを理解していても、彼らの挙動を把握していない限り、まさに「机上の空論」となってしまうという、恐るべき魔物。 それに立ち向かうべく発明されたのが、各ブラウザの独自仕様やバグの穴を利用して各ブラウザ個別に対応するという、いわゆる「CSSハック」。 今回はワタクシsmknが対IE用として日常的に使用している、（恐らく）最も簡単であろうCSSハック術をご紹介します。 と、その前に...。 今回ご紹介するCSSハック術は､CSSの正式な文法としては間違っています。 バリデート通りません。invalidです。 本来なら文法的にも正しいハックを使った方が良いのかもしれませんが、そもそもハックしちゃってる時点で正しいもクソもないような気が、個人的にはしてるので。 さらに、ハックの所為でCSSがバリ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
syboos.jp
WEBデザインの見本帳｜WEBデザイナーのためのデータベース・リンク集、サンプル・配色・参考・ご提案に!!
Ajax tooltip
https://3nhanced.com/examples/tooltip/
連載インデックス「Webブラウザ別CSSハック＆フィルタTips」 - ＠IT