FireFox3もしくは2のみのCSSハック
Posted by admin | Filed under css, ネタ
FireFox3もしくは2のみのCSSハックが気になったのでしらべてみた。
/*FireFox以外のもの*/
.sample {
color:#ff0000;
}
/*FireFox2以降対応*/
.sample, x:-moz-read-only {
color:#00ffff;
}
/*FireFox3以降対応*/
.sample, x:-moz-broken {
color:#0000ff;
}
<p class="sample">test</p>
～ まとめ ～
【FireFox2以降のみ対応させる】
クラスとかIDとか, x:-moz-read-only {
スタイルの内容;
}
【FireFox3以降のみ対応させる】
クラスとかIDとか, x:-moz-broken {
スタイルの内容;
}
これでおっけい！
ＣＳＳを使った縦中央横並び
Posted by admin | Filed under css
結構頻度高いのにわすれちゃってめんどくせとか思っちゃうからメモ。
※IE5.5,6,7 firefox3確認済み
まずtableでつくるとこんな感じ
 |
ＧＫ乙！ |
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img title="mario" src="http://sopeo.pocotan.com/wp-content/uploads/2008/10/mario.gif" alt="" width="144" height="192" /></td>
<td>ＧＫ乙！</td>
</tr>
</table>
んで見た目一緒だけどＣＳＳ配置した場合がこれ
cssの部分
.centerItem {
display: table-cell;
vertical-align: middle;
/*IE用*/
>display: inline;
>zoom: 1;
}
htmlの部分
<div>
<div class="centerItem"><img title="mario" src="http://sopeo.pocotan.com/wp-content/uploads/2008/10/mario.gif" alt="" width="144" height="192" /></div>
<div class="centerItem">ＧＫ乙！</div>
</div>
これだけ。
簡単なのになぜかめんどくさーとかおもっちゃうんだよね。
※IE用の部分は「IEだけにCSSを適応させる方法」の記事を参照してね。
IEだけにCSSを適応させる方法
Posted by admin | Filed under css
1枚のCSSファイルでIEとそれ以外のブラウザ別々に対応して欲しい場合
この2つを覚えておいて損はないでしょう！
続きを読む »
