unit3s.jp

先日知恩寺の朝市に行ってきました。今回で３回目ですが、ニッチなものがいっぱいあって最高です。今回もいつもながら凄い人ごみでかき分けるように色んなお店を見て回ってたときに、ふと目にとまったお店にその調味料はありました。

その名もMerrow Habanero

あまり辛いものは苦手なんですが、ハバネロという凶悪なイメージを覆すウマカラなソースにハマりました。

うまし！もう一段階辛いほうを注文してみようかな。

販売：ターンムファーム

色々ブラウザを見て対応していた時、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を考えてみた。

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;
clear: both;
visibility: hidden;
font-size:0.1px;
line-height:0;}

としていたんですが、win NN7.1では隙間が出来てしまいました。う〜ん。

そして変更後はこちら

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 */

safari2.0など、mac用のブラウザ（firefoxも含む）とNN7.1で見た場合、若干隙間のサイズは違うが、下が開いている現象があるという事を知ったので、 content: ".";を content: " ";にするのがやっぱりベストなのかなぁと実験しながら思いました。

追記

content: " ";に変更。下方互換の為に半角スペースが必要みたいです。しかし色々あるなぁ。笑

追記２（06/18）

content: " ";だとNetscape7.1でレイアウトが崩れました。笑。結局状況において content: ".";と切り分けて使うのがべすとなのか。。。と思って書いているが、結局オリジナルclearfixが一番考えられて作られている気がする。なので"."を基本使用した方がよいと思う。