[CSS]主要ブラウザの特定ブラウザのみに有効なCSSハック集
Internet Explorer、Firefox、Safari、Chrome、Operaなど主要ブラウザの中の特定ブラウザのみに有効なCSSハックをbradKELLETTから紹介します。 Documenting the Hacks: CSS Browser Targeting CSSハックは使用しないに越したことはありませんが、必要がある場合には最小限簡潔に記述しておくようにします。 各ブラウザの新しいバージョンがリリースされた際、これらのハックが無意味なものになることも念頭においてください。 Internet Explorer 6 IE6のみに適用します。 <textarea name="code" class="css" cols="60" rows="5"> #selector { _property: value; } </textarea>
![[CSS]主要ブラウザの特定ブラウザのみに有効なCSSハック集](https://cdn-ak-scissors.b.st-hatena.com/image/square/bc54860ba06deaa45382cf2bddc929515def0354/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fshared%2Flogo-2014050501-en.png)
[CSS]スタイルシートを自動でIE6対応にするオンラインサービス -ie6fixer
手元のスタイルシートをフロートやネガティブマージンなどIE6のバグを回避する記述を自動生成するオンラインサービス「ie6fixer」を紹介します。 ie6fixer IE6に対応したスタイルシートを生成する方法は、以下の手順です。 「master stylesheet」の欄に、スタイルシートを入力。 「Give me my ie6 fixes」ボタンをクリック。 以上で、IE6のバグに対応したスタイルシートが生成。 IE6のバグに対応している箇所は、現在のところ下記の通りです。 「min-height」は、「height」に変更。 「float」は、「display:inline;」を追加。 「position:relative;」は、「zoom:1;」を追加。 ネガティブマージンは、「position:relative; zoom:1;」を追加。 「overflow:hidden;」は、
IE6で閲覧すると。
hamashunさんがTwitterで、 IE6を使って閲覧すると右上に『アナログ』って出るようにしようぜ。 って言ってたので、CSS HappyLifeでやってみた。 ボクが出来る2008年最後の大仕事でした。えぇ。 使いたい方は是非是非。 ちなみに、ボクが使った画像はコレです。自分のモニタで出るやつを参考にしました。 ご自由にお使いください。 IE6だけに表示させるにはどんなやり方でもいいっすけど、手っ取り早いのだったらハック使ってやるのがいいかと。 .analog { display: none; } * html .analog { display: block; position: absolute; top: 10px; right: 30px; } こんな感じで。 であ。 16日のお昼頃追記 ウチのアクセス解析を久々に確認してみたら、全体の50％くらいがFirefoxで40％
高木浩光＠自宅の日記 - 楽天ad4Uの隠しリンクを露出させるユーザスタイルシート
■ 楽天ad4Uの隠しリンクを露出させるユーザスタイルシート 脆弱性を突いてブラウザの閲覧履歴を調べるという禁じ手に手を出した、掟破りの（自称「次世代」）行動ターゲティング広告「楽天ad4U」について、amachangの「IEのinnerHTMLやappendChildで要素が挿入された瞬間を取得する方法」を参考に、その隠しリンクを露出させるユーザスタイルシートを作ってみた。（Internet Explorer用。） #ad4u_list { display: expression(function() { if (!this.__mark) { this.__mark = true; // alert(this.innerHTML); var o = '<div style="overflow:scroll; border:dashed 4px red;">'; o = o + this
[CSS]クロスブラウザ対応、高さの異なるカラムを揃えるスタイルシート | コリス
Matthew James Taylorのエントリーから、高さの異なるdivで組んだカラムの高さを揃えるスタイルシートを紹介します。 Equal Height Columns with Cross-Browser CSS & No Hacks demo: 2カラム demo: 3カラム 以前、紹介した「高さの異なるカラムを揃えるスタイルシート」では、ページ内アンカーで要素が消失したり、IEで印刷できないなどの不具合がありましたが、今回紹介するものは、その２つの不具合が無いものとなっています（IE7調べ）。 対応ブラウザは、IE5.5, 6, 7, Fx1.5, 2, 3, Op8, 9, Safari, Google Chromeなどほとんどのものに対応しています。 仕組みはカラムごとにdivを用意し、それぞれをずらして配置します。 下記は、そのイメージです。
clearfix for Firefox3
最近htmlとcssばっかり書いてるまいです。 ruby?なにそれおいしいの？状態… そんな最近作業をしてて、先日書いた「clearfixでfloat解除」のclearfixでは Firefox3でちょっとおかしなことになってしまったので、 さらに手を加えてみました。 つべこべ言っても仕方ないのでとりあえずご紹介。 .clearfix:after { content: "."; display: block; clear: both; height: 0; font-size: 0; visibility: hidden; } .clearfix { display: inline-block; } .clearfix { display: block; } 前のだと何がどうなるかというと、footerとかにclearfixを適用させたとき、 一行分
firefox3.0の背景センタリング | Webデザイン フリーフォント Prismtone
firefox3.0になって、 サイトの背景がブレた感じになってるなぁと思い、検証してみたところ、 背景センタリングが、0.5px単位まで合わせてくるようになってました。 背景を敷くボックスが、 仮に横100pxの場合、 その横100px以上で、奇数幅の背景画像を指定した場合... → 背景画像が横にぼけた感じになります。 ブラウザが本気で画像を中央に合わせに来てる感じです。 縦方向についても考え方は同じです。 また、ボックスの大きさよりも小さい背景画像の場合は、 数字が割り切れなくても、 従来通り、1pxどちらかに寄る形で処理されているようです。 ※ prismtoneのヘッダの背景の端の方は、 bodyに背景を指定しているので、 windowサイズによっては、ぼけるようになってしまいました。 背景の1pxのずれは許容できるように作ったのに、 ここでぼけが発生するのはちょっと、困ったなぁ
Firefox 1.0, 1.5, 3.0 用の CSS ハック | ヨモツネット
概要 Firefox 1.0 以降用, Firefox 1.5 以降用, Firefox 3.0 以降用の CSS ハックの手法とその仕組みの説明です。 動作確認用の demo 説明 複数のセレクタに同じ宣言を共有する場合、h1, h2, h3 { font-style: bold } のようにセレクタをカンマで区切ってグループ化 (Grouping) することができます。 しかし、グループ化したセレクタ群の中に、Web ブラウザが未対応のセレクタが一つでも含まれている場合、グループ化した別のセレクタも無効化されてしまい、グループ化した全てのスタイルが適用されなくなります。 例えば、h2, p:first-child { font-weight:bold } のように宣言した場合、h2 要素と最初の子要素の p 要素が太字でレンダリングされます。しかし、IE 6 では :first-chi
Mozilla Japan ブログ - Firefox 3 の修正内容のご紹介 その3 ― URLも改行されるように
Firefox 2 までは日本語ではないテキストでは、Web デザイナの方がトリックを使わない限り、半角スペース (U+0020) 以外では改行されませんでした。そのため、長い URL が以下のようにはみ出したり、これが原因で Web ページ全体のデザインが壊れたりすることがありました。 これが、Firefox 3 では以下のように改行されるようになりました。 この修正は、多くの Internet Explorer (以下 IE) 向けにのみデザインされた Web ページの表示を、そのデザイナの意図通りに表示できるようになったことを意味します。 それでは、 Web デザイナの方には細かい仕様や注意点について、少し詳しい解説をさせて頂きます。デザイナの方が気になるのは、IE との互換性かもしれません。しかし、Firefox 3 のレンダリングエンジン、Gecko 1.9 は IE と全く同じ
IE7とFirefox2のDOCTYPEスイッチ
ブラウザの表示モードを変更するDOCTYPEスイッチのIE7とFirefox2を含めた一覧表です。 DOCTYPEスイッチとは、ブラウザの表示モードを(X)HTML文書に記述するDOCTYPE宣言の書き方や有無によって切り替えます。 ブラウザの表示モードには、以下の２つのモードがあります。 ※Netscape7やSafari0.8などには「Alomostモード」もありましたが、ほぼStandardsモードと同様です。 Standardsモード（標準準拠モード） W3Cの標準的仕様に準拠したモード Quirksモード（後方互換モード） 旧来のブラウザとの互換性のあるモード 「IE5」は、最初にDOCTYPEスイッチを導入した「Internet Explorer 5 for Mac OS」です。 Windows環境のIE5、IE5.5には、DOCTYPEスイッチは実装されていないため、Stan
IE6以下をWeb標準に準拠させるライブラリ『IE7.js』
IE6以下をWeb標準に準拠させるライブラリ『IE7.js』 多くの人が待ちに待ち望んだライブラリ。やはりすごい人はすごいものを作るんですね。 このライブラリを読み込むことによりIE6以下でもIE7と同じようなXHTM/CSSの解釈を行ってくれます。 ただし完全にIE7と同じような形にするのではなく、より近い形ということです。 現在公開されているバージョンはversion 2.0 (beta)ということで、まだ実務で使うのは難しいかもしれませんが、MITライセンスで公開されておりますので正式にリリースされればweb制作の現場を変えてしまうライブラリです。 設置方法 Google コードのie7-jsより直接読み込むことが可能です。 以下の要素をhead要素内などに記述します。 <!--[if lt IE 7]> <script src="http://ie7-js.googlecode.c
IE8 で実装された Selectors API とは何か？ - IT戦記
はじめに IE8 には Selectors API という新しい仕様が実装されました。 ということで、今後 DOM 操作 API の主流になるであろう Selectors API についてまとめておきます。 Selectors API が使えるブラウザ 2008 年 3 月 6 日現在の一覧 WebKit Build Archives | WebKit (開発版の Safari) Windows | Official Site for Microsoft Windows 10 Home & Pro OS, laptops, PCs, tablets & more (IE8 の Beta 版) Selectors API とは Selectors API とは W3C で定義された仕様です。詳細に関してはこちらをどうぞ 簡単に説明すると getElementsByTagName や getE
はねつき IE６で勝手にコンテンツ内容が複製されるバグ
よく、バグが多いバグが多いと嘆かれ続ける、業界ナンバーワンシェアの我らがふぁっきんIE様。 で、今日もまた恒例のバグに直面したわけです。それがタイトルにあるとおり、コンテンツ内容が複製されるバグというやつ。どうにか無事解決も出来たので、今回もメモがてらに書いてみます。内容は長くなるので以下に。 コンテンツ内容が複製される、別の言い方をすると、最後の内容物のゴーストが作成されるとでも言うのでしょうか。もしくは分身とか残像とかそんな感じ。 言葉だけだとわかり辛いので、画像を用意してみました。 Opera9で見た場合 IE6で見た場合 こんな感じでIEの方では最後の内容物の文字が複製されて下にはみ出してます。ちなみに、これが文字じゃなくて背景画像だった場合、背景画像が複製されることもあるそうで。 でサンプルソースはこんな感じ。 <body> <div id="container"> <di
IE6のCSSバグを視覚的にチェック
てんぽ: IE6のCSSバグを視覚的にチェック CSSやHTML、FC2ブログのカスタマイズ、共有テンプレートなど IE用Acidテストとも言えるCSSバグのチェックページを作ってみました。 IE6で表示するとすべてのチェック項目で「NG」と表示されますが、正しい表示を行うブラウザなら「OK」と表示されるはずです。 IEtest (beta) 具体的にはどうやっているかというと、たとえば「position: absoluteが指定されたボックスの幅をパーセントで指定したとき、 幅の参照先を、そのボックスの包含ブロックではなく、間近の親要素にしてしまうバグ」をチェックするコードは以下のようになっています。 <div class="container"> <div class="div1"> <div class="div2"></div> </div> </div> .container {
IE7のborder-styleの不思議
ジャンプで連載してるP2!がすごく好きなのに、非常に悲しい知らせを聞き、何とかしたいと切に願う今日この頃。 情報元：P2!を応援しています さて本題に。 border-bottom: 1px dotted #000;とかって書くと、IE6だけ破線の感覚が広くなってしまうじゃないですか。 というか、dashed を指定したときと同じになるアレです。 アレが嫌で、dotted でいけそうなデザインでも背景で切ってたりした訳で。 んで、IE7はなおってるーって喜んでたんですけど、solid で2px以上なborder があると、IE6と同じ破線になってしまうっぽいっていう事にいまさら？気づきました。 サンプルページとダウンロードは以下より。 サンプルページ ダウンロード サンプル作ったけど、別にソコまでせんでもいいので、本文内にも。 コレは正しい表示 コレはいけてない表示 当たり前だけど、IE7
[CSS]気をつけたいIE 7のバグ -CSS-Discuss
CSS-Discussにアップされている「IE 7 Bugs」の意訳です。 省略している箇所も多数あるので、原文も参照ください。 Internet Explorer Win Bugs - css-discuss 注意： バグには、IE7のみでなく、IE 5, 5.5, 6のものも含まれています。 公開されてから時間が経っているためか、ちょっと古いものもあります。 IEのフォントサイズのバグ フォントサイズの継承 IEの相対指定のフォントサイズの継承は、うまく機能しません。 相対指定を行う場合、emより%で指定を行う方が便利です。もし、em指定を行う場合は最初に%指定を行ってください。 例： body{ font-size: 100.01%; } ※100%の代わりに100.01%を使用するのは、Operaでの継承バグの回避のためです。 キーワード指定でのサイズ フォントサイズに「small
ブロックボックス化した要素を含むリストアイテムの後ろに空行が入る(5.x/6.0)
ブロックボックス化した要素を含むリストアイテムの後ろに空行が入る(5.x/6.0) 2003-11-06修正。症状と補足を変更。 2003-12-25修正。補足に回避法を追加。 2004-03-03修正。[3-882]の記述を加え、内容を整理。 症状 リストアイテム要素の内容物の末端にブロックボックスを生成する設定（display:block;）にしたインライン要素を置くと、リストアイテム要素のボックスの直後に空行が発生する。。 例示 <ul> <li><span style="display:block; margin:0; background:yellow;"> ブロック</span></li> <li><span style="display:block; margin:0; background:yellow;"> ブロック</span></li> </ul>
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
基本となるシンプルなtableの装飾：CSS小技
IE6で閲覧するとモノクロ - lucky bag
text-justify－CSSリファレンス