スタイルシート
2012年9月15日
Categories | ホームページ
いやぁ～困ったもんだのIEです。
今時のCSS3で画像背景に影付けてみたのですが
IE8以下だと全然表示されません。
IE9では表示されるものの、スタイルシートに記述したことを
うまく反映してくれない。
こんな感じに
↑ Internet Explorer 9 （IE8以下は何も表示されん）
↑ IE以外のブラウザ
※参考ページ
https://www.hcz.jp/history/2007_09_11.html
どないしようか・・・
IEユーザーもまだまだ多いだろうし、
やはり画像で影こさえたほうが良さそうだな。
果たして完成ページはどうなることやら。
2010年5月1日
Categories | ホームページ
表（table要素）をスタイルシートを使ってセンタリングしたい
（中央に寄せたい）場合、ブラウザやバージョンによって表示のされ方が
異なるため結構ややこしいです。私はIEターゲットにHP作っているのですが、
表（table要素）を囲むブロック（div要素）でtext-alignプロパティにcenterを
指定していました。
div.c {text-align: center;}
しかしIEのバージョン違いではセルの中身までセンタリングされてしまう。
こりゃいかんな・・・そこで新たにtable内セル左寄せを追加しました。
div.c {text-align: center;}
div.c table {text-align: left;}
IEでは上記ブロック（div要素）で表を囲めばバージョンの違いでもセンタリング
出来ます。が、しかし、ネスケやファイヤーフォックスではこの指定は認識されず、
全部ブラウザ左に寄ってしまいます。
それを回避するためにtableのmarginプロパティを使います。
div.c table {text-align: left;} 変更前
↓
div.c table {text-align: left; margin: auto;} 変更後
スタイルシートで上記記述をすると、殆どのブラウザで表（table）のセンタリング
が可能になります。完成はこんな感じに。
スタイルシート（css）部分
div.ctable {text-align: center;} IEでのセンタリング
div.ctable table {margin: auto; text-align: left;} IE以外でのセンタリング
ソース（html）部分
<div> <table class="mceItemTable"> <tbody> <tr><th>×××</th><th>×××</th> </tr><tr><td>×××</td><td>×××</td></tr> </tbody> </table> </div>
以上 ぉしまい
