やまだ系

コンピューターやWEB関連の情報収拾と整理、資格取得に関することを目的にしたブログ

MacIEのみ指定する

Operaはまだ確認していないんですが、MacIEのみCSSを変更かける一つの方法を試しました。うまくいったようなのでメモ代わりに記述します。
実際指定したいCSSは下記の通りで、リスト表示のliタグに一つ一つのメニューを左そろえに1行表示させたいので指定してあります。見やすさを考慮して余白(padding)や間隔(margin)の指定をしています。

1-MacIE用のCSS:MacIEは横幅を指定しないと100%の横幅で表示しようとしてしまうので、横幅指定をかけるその際、少し小さめにして文字数が少ないメニューでも余白が多すぎないようにするwidthを指定(ここ2参照)。ただ、長い文字は折り返されてしまうのでwhite-space:nowrap;で、文字を指定横幅で折り返しさせないようにする。これで何とか見える

div#s-category ul.hatena-sectioncategory li{
float: left;
border:1px solid #666;
background-color:#FFF;
margin: 0px 5px 0px auto;
padding:5px 5px;
text-align:center;
vertcal-align:middle;
font-size:12px;
white-space:nowrap;
width:10%;//ここ2
height:20px;
}


2-実際は横幅を指定しなくてもその他のブラウザは文字幅に合わせて表示してくれるので、MacIEで使ったwidthの指定はいらない(ここ1参照)ので下記の通り

div#s-category ul.hatena-sectioncategory li{
float: left;
border:1px solid #666;
background-color:#FFF;
margin: 0px 5px 0px auto;
padding:5px 10px;
text-align:center;
vertcal-align:middle;
font-size:12px;
width:auto;//ここ1
height:auto;
}

二つのCSSを用意して1のMacIE用のCSSを先にCSSに記述
最後に読ませたい2のCSSを記述するんですが・・・そこでMacIEだけにはそこのCSSをませないCSSハックが登場です。いくつかの方法があるんですが、今回使用したのはコメント利用の方法です。
/* こめんと */←のように描くとCSSとしてブラウザは読まないので、CSSの説明によく使うこれですが。
/* こめんと \*/と記述するとこれ以降のCSSの記述をMacIEは読まないです^^すげーです。
ということで今回この方法を利用してMacIEの表示が壊れるのを回避しました。なので先にMacIE用のCSSを記述して、後にこのバックスラッシュ(入力は¥マークで行う)をコメント内に使うことでMacIEだけの表示崩れをフォローすることができました。詳しくはソースコードを見て確認してください。
※2で、widthの指定(ここ1参照)を入れているのは、記述が先になったMacIE用CSSでwidth指定している幅が何にも指定していないと有効になってしまうのであえてwidth:autoのように自動的な幅指定をかけています。
ちなみにWindowsのノートパッド(メモ帳)では日本語が文字化けして見えるます。
いろいろメモとしてかきました・・・><width幅をすごく狭くして指定し、nowrapさせればわざわざハックかけなくても問題なく表示されました。ページ一番上の管理メニューがその例・・・(汗)