[B! Tips][css] mapiroのブックマーク

【CSS】覚えておいて損はない CSS の定番テクニック BEST 5 | バシャログ。

ネットで検索をすると CSS のテクニックが山ほど公開されていますが、実際に商用サイトの制作をしていて個人的に利用する頻度が高いテクニックの BEST 5 をご紹介します。ちょっと凝ったデザインのサイトをコーディングする時に、これらのテクニックに助けられることが多いです。どれも覚えておいて損はないものばかりです！ IE6 でも min-height を使う例えば、異なる高さのブロックを float しつつ底辺のラインを揃えたい時などに、「IE6 が min-height に対応していたら楽なのに！」と思うことがありますが、以下のテクニックを使えば IE6 でも min-height（相当）の適用が可能になります。 [CREAMU]CSSでmin-heightをクロスブラウザにする最も簡単な方法『Easiest cross-browser CSS min-height』 IE6 に mi

mapiro 2009/06/19

リンク

IE6 を IE7/8 互換にする Script と XML & DOCTYPE宣言 - 続・教えて！Turing先生

Webデザインみなさん、こんばんは。楽しく HTML 書いてますか？HTML を書くのは楽しいですけど、ブラウザ互換性の検証は面倒くさいですよね。特に IE6 は一体何のつもりかと思いますね。そんな悩みの多くを解決するスクリプト ie7-js の存在を知ったie7-js とは IE6 の挙動を IE7 互換にしてくれる JavaScript です。 ie7-js - Google Code日本語の解説記事はこちら。今年の頭に話題になっていたようですね。見過ごしてました。IE7.js登場 - IEのCSS/HTML非準拠はこれで対応 | エンタープライズ | マイコミジャーナルIE6以下をWeb標準に準拠させるライブラリ『IE7.js』[to-R]このスクリプト、大変便利なのですが、一つ使用上の注意があります。html の一行目は必ず DOCTYPE 宣言を書いてください間違っても xml

mapiro 2009/05/25

ie7.jsを使用する際は，Doctype宣言を先頭に置き，標準モードにすることが必須。

リンク

IEで絶対配置（position:absolute）のボックスが消えるバグの検証

先日、友達の依頼で XHTML+CSS のコーディングをしていたところ、position:absolute を指定したボックスが Win版IE6 でのみ表示されないという現象に出くわしました。あちこち調べてみたところ、かなり厄介な IE のバグのようで、消えるときの条件がいろいろあることがわかったので、整理してみたいと思います。まず最初に見つけたのが、以下のサイト。 » IEで position:absolute した要素が消えるバグこちらで紹介されているのは、float と clear にはさまれた position:absolute が消えてしまう現象とその対策。でも、私がはまったケースでは、position:abloslute の前には float がありません。紹介されているように clear を追加してみても当然ダメ。う～ん、なぜだ・・・日本語のリソースを調べてみても解決策

mapiro 2009/05/15

リンク

見出しがfloating blockの裏に侵食する・floating blockに後続する要素の左右margin,padding | Takazudo Clipping*

画像が左に回り込んだとき、次にくる見出しの左paddingが効いていない。 floatした要素に後続する要素の左右margin,paddingは無視される？CSS2.1の仕様書に何か書いてあるかと思ったけれど、ズバリな箇所が見つけられなかった。でもこんな例がありました。「浮動する画像は、重なるブロックボックスの境界を不明確にする」！よくわからないのでFirefox3で実験。以下は、div.imageをfloat:leftし、その後に、いろんなdisplayプロパティをもった要素を並べてみた結果です。各ブロックには、pading,margin,bordrerを指定しています。※これらは、すべてのdisplayプロパティに対応しているブラウザでしか、正確に描画されません。 Floatと後続要素margin,padding検証(HTML) そのCSS(CSS) Firefox3での表示(GI