アンダースコア・ハック
CSSで設定したプロパティ（width/font-color等）の前にアンダースコア "_" を付与すると、WinIEではそれを正常なプロパティとして読み込み、他のブラウザでは無視される（=定義されていないプロパティとして認識される）ことを利用した「アンダースコア・ハック」を紹介します。Mozilla 系のフォントサイズが小さくなる問題で、以前 JavaScript によってサイズを変更するエントリーを公開しましたが、それをCSSで実現することができます。
参考サイトは下記です。ありがとうございました。
ということで、利用方法です。公開テンプレートのサイドバーのフォントサイズを、IEではデフォルトのサイズ（9px）を、NetScapeやFirefox等、WinIE系以外のブラウザで 10px を指定する例を挙げておきます。
.side {
font-family: Verdana, Arial, sans-serif;
color:#666666;
background: none;
font-size:10px;
_font-size:9px;
font-weight:normal;
line-height:150%;
padding:2px;
margin-bottom:25px;
}動作の仕組みですが、まず上の「font-size:10px;」を全てのブラウザが読み込みます。そして次の「_font-size:9px;」で、WinIE系のブラウザだけが正常なプロパティとして読み込みます（つまりこちらが有効になる）。結果としてWinIE系とそれ以外のブラウザで異なるサイズを指定することができます。記述の順番を間違えないように気をつけましょう。
いくつかのサイトを見てまわるとこのハックを利用した場合、CSSが valid にならないことが問題として挙げられているようですので、JavaScript によるプロパティ値修正も策としては妥当ではないかと思います。
- YouTube動画にキャプションをつけてテキストを回り込ませる方法
- 画像を下揃えにしてテキストを回り込ませる方法
- style要素にCSSの擬似要素は記述可能か？
- position:relativeを設定すると他の要素がずれる場合の対処
- CSSでタブ切り替えする方法
- :target擬似クラスのまとめ
- CSSでヘッダを固定したスクロールテーブルを作る方法
- レスポンシブウェブデザインで画像を縮小する方法
- disabledなボタンのhoverのスタイルを無効にする方法
- HTML要素を別の要素を基点にしてCSSで絶対配置する方法
- :not擬似クラスでCSS3のサポートをチェックする方法
- :checked擬似クラスでチェックボックスに連動して要素を表示させる方法
- ol要素の入れ子で親の番号を子に割り当てる方法
- チェックボックスやラジオボタンを大きくする方法
- CSSで中央に配置する方法
≫ アンダースコア・ハックためしてみました。 from 私立大学職員の情報オフィス
小粋空間さんのエントリーにあるCSSのカスタマイズを早速行ってみました... [続きを読む]
≫ アンダースコア・ハック from いろんなことが起こる
オリジナルのテンプレートでは、サイドメニューのタイトルはボックスのセンター揃えで... [続きを読む]
≫ MovableTypeのfontのサイズはブラウザによって表示のされ方が違う from MovableType幼稚園
以前、インターネットエクスプローラー（以下IE）とFirefoxのフォントの大きさの表示のされ方違う、という事を嘆いておりました。いろいろ調べてみると、や... [続きを読む]
≫ WinIE5.5/5.0用のスタイルをこう書いてみる from ナチュ日記。
たまに Win IE5.5/5.0 対応的な案件が来るといつもと勝手が変わってき... [続きを読む]
≫ スタイルシート from np's BLOG
普段このサイトを管理しているときはFirefoxでチェックしているんですが、今日たまたまInternet Explorer 6でこのサイトを見る機会があ... [続きを読む]
≫ IE6.0とFirefoxの見た目を同じにするために(アンダースコアハック) from のんびり前進じたばた生活
「小粋空間」のyujiroさんのテンプレートのソースを見ていますと
padding: 6px 3px 0px 3px;
_padding: 5px 3... [続きを読む]
≫ Underscore Hack from PARADISE CLUB
Mozilla 系のブラウザにて、観覧された場合では WinIE 系ブラウザの時... [続きを読む]
≫ アンダースコアハック from Hermit Purple
いま、CSSの勉強をしていて始めて知ったのですが、「アンダースコアハック」という... [続きを読む]
知らんかった・・・。楽そうだし、やってみるかなぁ。
でも、ie7でどうなるんでしょうねぇ。より厳密にCSSをきちんと解釈するようになるのなら、こういうの通用しなくなりそうな気が・・・。
＞Border.さん
こんにちは。
ちょこっと手を加えればいいので結構便利です。
IE7、中途半端に良くなると困りますね。（笑）
Win2000が対象外というのもなんだか。
yujiro様、
テンプレートのスタイルシートの「_」の意味について質問した者です。
こちらの記事を読んで、理解できました。
自分は「アンダーバー」で検索していて、
解答にたどり着けませんでした。
「アンダースコア」と言うのですね。
改めて「アンダースコア」で検索したところ、
こちらのエントリーがヒットしました。
お忙しいところ、ご回答いただきありがとうございましたm(__)m
＞カンカンさん
こんにちは。
ご連絡ありがとうございました。
ではでは！
こんにちは、yujiroさん
何時も、お世話になっています。
記事を参考に、CSSを修正して見ました
普段は、IEを使っているので気が付かない事が多いです。
前日 Firefox2.0 をインストールして見たのですが
Firefoxにて観覧すると、ブログの外枠が消えてしまうのは何が原因でしょうか？
テンプレートのヘルプ等を、拝見しましたが同じ現象が見つからなかったので
見落としていたらすいません。
現在、CSSには以下の様に、記載しています。
/* 2カラム用 */
.layout-two-column-left #box,
.layout-two-column-right #box {
width: 680px;
margin-right: auto;
margin-left: auto;
padding: 0;
border-bottom: 1px solid #9B937B;
border-left: 1px solid #9B937B;
border-right: 1px solid #9B937B;
text-align: left;
background-color: #ffffff;
}
/* 2カラム用 */
.layout-one-column #container {
margin-bottom: 0;
}
/* 2カラム(右サイドバー) */
.layout-two-column-right #content {
float: left;
width: 478px;
margin: 0;
border-bottom: 1px solid #9B937B;
border-right: 1px solid #9B937B;
}
.layout-two-column-right #links-right-box {
float: left;
width: 200px;
}
.layout-two-column-right #links-right {
padding: 13px 15px 0;
color: #ffffff;
}
お手数お掛けしますが宜しくお願いします。
＞mituruさん
こんばんは。
お世話になります。
ご質問の件ですが、右サイドバーのバナー表示部分に div 終了タグが抜けているようです（下記青色）。
<!-- バナー開始 -->
<div class="bannerlist">
：
</div>
<!-- バナー終了 -->それではよろしくお願い致します。
こんばんは、yujiroさん
お忙しい中を、ご確認して頂きましてありがとうございます。
初歩的なミスで、お手数お掛けしてすいませんでした
テンプレートを修正して、Firefoxでも同じ様に表示されるようになりました。
ありがとうございます。
＞mituruさん
こんばんは。
ご連絡ありがとうございました。
無事に直ったようで良かったです。
ではでは！
