- 締切済み
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)
- grumpy_the_dwarf
- ベストアンサー率48% (1628/3337)
お礼
回答ありがとうございます。 なるほど、端数の扱いが違うわけですね。 ということは、#wrapperのwidthが端数が出ないような数値で段階的に可変していけば実現できそうな感じですね。 JQueryを使用してみようと思います。 ご助力ありがとうございました。