べつになんでもないこと

変なことをしてるので、その背景から^^;

一つの記事に複数ネタがあるとき、あとでリンクする必要があった時に備えてhrタグにidを設定するようにしていたのですが、いざリンクしようとしたらソースを見ないとidがわからなかったので、1年くらい前からhrタグをaタグで囲って線をクリックするとidが分かるようにしました。

こんなの↓

<a href="#0108ts1"><hr id="0108ts1"></a>

---

ただそれだと、たった2dotを正確にマウスでポイントする必要があるので、borderを大きくとってクリックしやすくしようとしたら不格好に……ならばとborderを背景色にしてbackground-colorを線のように見せようとheightを挿入したら、FirefoxとIE6の表示とIE8の表示が違うのでまたMSか……と思いその時は「IE8だけに適用させるCSSハック」でIE8の方をいじって以後忘れていました。

で、Chromiumをサブブラウザに使うようになってからhrが変だぞと思うようになって、そのうち調べようと思いつつ今に至ったのでした。

という話はどうでもいいわけですがｗ

試しにdivとhrに同じスタイルを適用して見ると（昨日まで4.のスタイルを使ってました）

1. <div style="border:5px solid red;background:#777;padding-top:1px">
2. <hr style="border:5px solid red;background:#777;padding-top:1px">
3. <div style="height:11px;border:5px solid red;background:#777">
4. <hr style="height:11px;border:5px solid red;background:#777">

4.の表示はFirefoxとIE6がおかしいんじゃなイカ？

Firefoxはなんでhrタグのheightの解釈が違うんだろう……しょうがないので、2.のスタイルを採用して、IE6/7だけ「<!--[if lt IE 8]> ～ <![endif]-->」で4.のスタイル使うことにしました。

－追記－

3.のスタイルについて、IE6でheight:1px;を指定しても1pxになりません（10pxくらい）でした。
で、後日談：hrタグをaタグで囲ったら怒られた
というわけでhrタグを使わず、aタグをdisplay:blockにして1.のスタイルが一番面倒がないという結果になりました。

　￣￣￣￣￣￣○￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣
　　　　　　　　　　　O 。
　　　　　　　　　　　　　　　　 , ─ヽ
＿＿＿＿＿＿＿＿　　　　/,/＼ヾ＼ 　　／￣￣￣￣￣￣￣￣￣
|＿＿|＿＿|＿＿|＿　　 __（（´∀｀＼　）＜　・・・という覚書だったとさ
|＿|＿＿|＿＿|＿＿　／ノへゝ/''' 　)ヽ　　＼＿＿＿＿＿＿＿＿＿
||＿＿|　　　　　　　 | | ＼´-｀）<ﾂﾏﾝﾈ
|＿|＿|　从.从从　　| ＼__￣￣⊂|丿/
|＿＿|| 从人人从.　|　/＼＿＿/::::::|||
|＿|＿|／//ヽヾ＼　 /　　　::::::::::::ゝ/||
────────(~～ヽ::::::::::::|／