- 締切済み
safariでのリキッドデザイン
ウインドウ幅によって横幅可変のページを作ろうとしているのですが、floatを使用して配置したボックスの列の右側がSafariで表示した場合奇麗に揃いません。 Firefoxでは奇麗に揃うのですが、Safariのバグでしょうか？ ちなみに下記のようなHTMLとなります。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>名称未設定</title> <style type = "text/css"> <!-- *{ margin:0px; padding:0px; } body{ margin:10px; } #wrapper{ width:100%; } #head{ background-color:#EEEEEE; width:100%; } #days div{ background-color:#EEEEEE; float:left; text-align:center; width:20%; } --> </style> </head> <body> <div id="wrapper"> <div id="head"> ほげほげ </div> <div id="days"> <div>1<br>月</div> <div>2<br>火</div> <div>3<br>水</div> <div>4<br>木</div> <div>5<br>金</div> </div> </div> </body> </html> ほげほげのボックスの右側と、floatで並べたボックスの右側が揃いません。Safariのバージョンは4.0.4です。 エクセルのような表を作ろうと思っているのですが、横幅固定だと一つ一つのボックスが狭くなってしまうので、大きなディスプレイでは広く表示できるようにしたいのです。 なにか対処法をご存知な方、ご助力いただけると幸いです。よろしくお願いいたします。
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- k0021
- ベストアンサー率26% (32/120)
縦・横方向のセルの結合は、ブラウザによりスタイルシートの変更が必要です。縦方向のセルの結合場合、Firefox・Ssfari で参照した場合ずれが発生しています。横方向のセルの結合は、IE・Firefox・Ssfari・Opera別にスタイルシートの変更が必要ですが。 ブラウザによりスタイルシートを変更が必要なので テーブルで作成をすいせんします。
- grumpy_the_dwarf
- ベストアンサー率48% (1628/3337)
5で割り切れない幅の20%はどう計算するのかの考え方の問題です。 たとえばdiv#daysの幅が829pxだったとします。その20%を165pxと 端数を切り捨ててきっちり並べるのがSafariで、165.8pxとしてお いて微妙にずれながら並べるのがFirefox。ウィンドウ幅をガシガ シ動かしてみると、実はFirefoxも微妙にずれることがあるのが観 察出来るはずです。 表を作りたかったら表で描けばいいのです。
お礼
回答ありがとうございます。 なるほど、端数の扱いが違うわけですね。 ということは、#wrapperのwidthが端数が出ないような数値で段階的に可変していけば実現できそうな感じですね。 JQueryを使用してみようと思います。 ご助力ありがとうございました。