CSS
Merrow Habaneroにはまる
先日知恩寺の朝市に行ってきました。今回で３回目ですが、ニッチなものがいっぱいあって最高です。今回もいつもながら凄い人ごみでかき分けるように色んなお店を見て回ってたときに、ふと目にとまったお店にその調味料はありました。 その名もMerrow Habanero あまり辛いものは苦手なんですが、ハバネロという凶悪なイメージを覆すウマカラなソースにハマりました。 うまし！もう一段階辛いほうを注文してみようかな。 販売：ターンムファーム
Netscape 7.1での背景画像のポジション設定
色々ブラウザを見て対応していた時、Netscape 7.1でliの背景画像が見えない事に気づき、考えてプロパティを色々変更したり、バグ情報を探していたんですが、どうもbackground-positionを数値て書かないとNetscape 7.1ではポジションが変な事になるらしい。 ということで下記に変更 background:url(“../images/xxxx.gif”)? no-repeat right 10px; を background:url(“../images/xxxx.gif”)? no-repeat 0 10px; 特にpx, %など入れなくても問題なさげでした（表記上は）
clearfixを考えみた .1
作成時によく使っている魔法の呪文の様に思われているclearfixを考えてみた。 clearfixは言わずも知れたPosition Is Everythingから編み出されたモダンブラウザのfloat問題を解決する為に生まれたCSS記述方式だが、色々調べるとそれぞれの考えかたでちょこちょこ記述が違うので自分でテストした中でこれかなと思ったものを覚え書き。 norisfactoryさんのclearfixの決定版を作る ?モダンブラウザ編ーを参考にさせて頂きました。 Position Is Everythingオリジナル clearfix:after { content: “.”; display: block; height: 0; clear: both; visibility: hidden; } .clearfix {display: inline-block;} /* Hides from IE-mac ¥*/ * html .clearfix {height: 1%;} .clearfix {display: block;} /* End hide from IE-mac */ 自分の中での修正版、その一 ちなみに 最初は clearfix:after { content: “.”; display: block; height: 0; [...]
IE6~IE7のHackまとめ
ふと思ってIE Hackまとめをしてみました。ググれば色々あると思いますが、個人的備忘録として。。。 IE6〜以前用Hack *html セレクタ/id名/class名 { } IE7用Hack *+html セレクタ/id名/class名 { } *:first-child+html セレクタ/id名/class名 { } IE 7を含むモダンブラウザのみ html>body セレクタ/id名/class名 { } IE 7以外のモダンブラウザ(FireFox, Safari, Operaなど)のみ html>/**/body セレクタ/id名/class名 { } IE全部まとめて *+html セレクタ/id名/class名, *html セレクタ/id名/class名 { } より詳しい説明はここを確認。 http://www.webdevout.net/css-hacks この中の「in-CSS hacks」が参考になりますが、全部まとめて勉強になります。 【追記：2009:04:21】 非常にこのページにアクセスが多いのでなぜかと調べたらgoogleで「ie hack」と入れると上位に出てきてしまう状態でした。ですが内容が非常に貧弱な記事にこんなにアクセスして頂くのも申し訳ないので上記の内容については追記を、ここからは加筆になります。 基本、IE Hack自体を使わないように心がけているんですが、必要に応じて別CSSやjsをを特定のIEのバージョンに合わせて読み込ませる「コンディショナルコメント」（互換モード）を使用しています。主要な用途としては外部ファイルを読み込ませるケースが多いと思いますが、これはページ内に直接javascriptを記述したりする際に使うことももちろんできます。 別ファイルを用意しなければならないという煩わしさもあると思いますが、今後の事を考えるとhack自体どこまで使えるのか疑問なのでこちらを使用したほうがいいと思います。 コンディショナルコメントのすすめ 基本的には下記のコメントアウトの中にIE用のexpressionを記述してバージョンを指定するだけです。 <!–[if expression]> 記述したい内容はこちら。外部ファイルでもhtmlでもjs直書きでもオッケーです<![endif]–> 例えばIEのバージョンにかかわらずIEのみに特定のファイルを読み込ませたい場合は下記の<!–[if IE ]>〜<![endif]–> [...]
MAC IE用ハックとFireFox対応
FireFoxでは半角英数字で長文を書くと表示が改行されないバグがある。 問題の解消は基本的にCSSではできない。ブラウザ自体のバグであり、 Firefoxソフトそのものをハックしないといけないのでこちら側での 対処はできないと思います。最終手段としてテーブル組にするか、CSSでoverflowを使用して はみ出る部分を非表示する事で、体裁を整える方法を記載しておきます。 普通にoverflowを使用すると今度はMac IEでこのoverflowを使用した ブロックが丸ごと消えるバグがあるので、下記の方法で対処。? Holly Hack Mac IE 5のみにスタイルを除外 /* Not for Mac IE 5.x ?*/ overflow:hidden; /* For other browser */ 別にMac IE 5のみにスタイルを適用方法もある。 /* for Mac IE 5.x Only ?*//*/ overflow:hidden; /* For other browser */ word-break:break-all;、word-break:keep-all; はIEにしか働かないので、FireFoxやネスケでは要注意。
© 2012 unit3s.jp. All Rights Reserved.
Powered by WordPress. Designed by 