IE8〜11/Edge12〜の各バージョンに対応したCSSハックまとめ | SPYWEBこの記事は CSS Advent Calendar 2017 5日目の記事です。IE11/Edgeがメインの時代になったとはいえ、まだまだIEのみ表示がおかしいことがあります。そんなときに使えるCSSハックをまとめてみました。暇なときに少しずつ検証したので、以下で紹介するハックは動作確認済みです。
IEの異なるバージョンごとにスタイルシートを適用する方法のおさらい
CSSやJavaScriptを使って、IE6, IE7, IE8, IE9 とIEの異なるバージョンごとにスタイルシートを適用する方法のまとめを紹介します。 Use Different Styles For Different Internet Explorer Versions [ad#ad-2] 下記は各ポイントを意訳したものです。 CSS: 条件付きコメント(class) CSS: 条件付きコメント(外部スタイルシート) CSS: CSS Hack JavaScript JavaScript: jQuery おまけ CSS: 条件付きコメント 条件付きコメントを使用して、ドキュメントの一番上の要素(html)にIE6/7/8用のclassを付与します。 HTML <!--[if IE 6]> <html class="ie6"> <![endif]--
CSSハック一覧
2013年3月23日 CSS 異なるブラウザーで見たらレイアウトが崩れる。。CSSハックはそんな時のお役立ち裏技（？）です。私がブックマークしているCSSハックに関するWebサイトがたくさんあったので（Safariがのってない・IE8しかのってない。。等の理由で）、自分用メモ。「こんなやり方もある！」というのがあればコメントして教えてください！ ↑私が10年以上利用している会計ソフト！ Internet Explorer IE6以下 #help_me { _color: blue; } * html #help_me { color: red; } IE7 *:first-child+html #help_me { color: red; } *+html #help_me { color: red; } IE6, IE7 #help_me { /color: blue; } IE8 #h
SafariのCSSハック｜無幻 - MUGEN -
Safariハック 1 Safari2、3 CSS Validator 通過しない /* safari2,3Hack */ p { color: #000000; } /* その他のブラウザ */ html*p { color: #ffffff; } /* Safari2、3 */ * html p { color: #000000; } /* その他のブラウザ */ /* EndSafari2,3Hack */ Safariハック 2 Safari /* safariHack */ html[xmlns*=""] body:last-child p { color: #000000; } /* EndSafariHack */ Safariハック 3 Safari /* safariHack */ html:not(:only-child:only-child) p { color: #
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のみに効くハック スタ
IE7のみをハックするCSS (Happy Swing)
久しぶりにCSSネタを。 クライアントから「IE7でフォームのテキストフィールドが突き抜けるんですけど・・・」と言われた。 とりあえず、IE7で確認してみると、崩れてない。 まさか！と思って、会社に数台しかないVistaを借りて確認してみたら、ものの見事に突き抜けてました＾＾； というわけで、急遽IE7のみをハックすることに。 せっかく調べたので、IE7のハック方法を自分のメモのために残しておきます。 IE7のみにCSSを適用する場合 *:first-child+html div.test { } IE7以外のIE（IE6以前、MacIE5）にCSSを適用する場合 *html div.test { } IE（IE7含む）以外のブラウザにCSSを適用する場合 html>/**/body div.test {} IE7とその他ブラウザにCSSを適用する（IE7以前のIEのみ除外する）
異なるバージョンのFirefoxでCSSを有効・無効にするハック集:phpspot開発日誌
異なるバージョンのFirefoxでCSSを有効・無効にするハック集が紹介されていました。 Firefox のバージョンによって有効なCSSを出し分けるような場合に使えそうです。 すべてのバージョンのFirefoxをターゲットとする /* 方法１ */ #selector[id=selector] { color: red; } /* 方法２ */ @-moz-document url-prefix() { .selector { color: red; } } /* Firefoxを含むすべてのGeckoエンジンで有効にする */ *>.selector { color: red; } Firefox 1.5 と それ以降のバージョンで有効にする .selector, x:-moz-any-link, x:only-child { color: red; } Firefox 2 以降のバー
長～いURLによるカラム落ち、に対処する - Archiva
Make a note of it: Web tech, montaineering, and so on. Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。 長いURL(半角英数字）を強制改行させるには、CSSで「word-break: break-all;」を指定すれば良い。これはIEの独自拡張で、IE5.0から対応しています。 通常のボックス要素の場合だと、Opera/firefoxではボックスを突き破りはしても、ボックスを拡張したりはしない。 幅が指定されたボックス要素を拡張してしまうのはIEのバグなので、通常は「word-break: break-all;」で大きな問題は無いです。（レイアウトが崩れない、て意味ね） ただし、table要素に詰まっていると、ややこしくなります。table要素は特殊なブロック要素で、中
CSS ハックまとめ Lucky bag::blog: IE7 を含むモダンブラウザ向け
Internet Explorer 7 は、 8 月にも beta3 がリリースされるかも知れないんだけど、今現在、IE7 beta2 を含むモダンブラウザに有効そうだと思われる CSS ハックを自分用にまとめておく。以前に IE 7 用の CSS ハックを紹介したことがあったけど、今回の Easy CSS hacks for IE7 - Nano See, Nano Do で紹介されていたハックは、比較的シンプルかも知れない。想定ブラウザは下記のとおり。 バージョン 6 以下の IE IE7 それ以外のモダンブラウザ（Safari、Opera、Firefox） ブラウザごとのハック 全てのサンプルは body 要素を指定の対象としている。 バージョン 6 以下の IE にのみ適用 * html body サンプルページ バージョン 7 の IE にのみ適用 *+html body サンプ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
わずか四文字でIE6/7/8を区別するCSSハック | コリス
CSSハック | BLOG × WORLD ENDING