width:100%;の画面幅いっぱいの要素内に、float:leftで隙間なく3つのブロック要素を横に並べるページを作っているのですが、iPadのSafariで確認すると左右のボックスwidth:33%にして、真ん中のボックスをwidth:34%;にしているのに右端に余り？のようなものが出てしまいます。クロスブラウザでも隙間なく見せるには、どんな方法がありますか？
width: 33.333333333333%ってしたらどうなりますか？
ダメでした・・・
「display: table」と「display: table-cell」は試した？
すみません、それだとちょっと不都合があるのでブロック要素を3つ隙間なく並べる方法が知りたいです。
そもそも100%幅の親要素に隙間が出来ていたりしませんか？iPad safariに対してCSSリセットが足りていないとか。
それは大丈夫です。無いです。
すみません、逆にですが、ちゃんとリセットされていればブロック要素3つを隙間なく並べるアイディア何かご存知ですか？
失礼しました。試してみたところiPad 3rdで再現できました。おそらく小数点の処理の問題です。
強引なやり方だと、3番目のカラムにpaddin-rightで1px足すと解消はされます。もしくはiPadの場合、ウィンドウサイズは固定幅なのでピクセル指定してしまうのもありかと思います。（Retina、miniの判別は必要になりますが）
あとiPadの解決の前に33%・34%・33%とするとIE7だとウィンドウサイズによってはカラム落ちします。
こちらが参考になるかと↓Rriver » レスポンシブなデザインにするなら知っておきたい。各ブラウザの小数点以下のピクセル値の扱いttp://parashuto.com/rriver/responsive-web/sub-pixel-rounding-browser-problem
なるほど理解しました。小数点の扱われ方を頭に入れたいと思います。確かにiPadは大きく分けてminiか3～か～2なので、ピクセル指定での案も考えます。ありがとうございました！
みんなの回答 3 件
width: 33.333333333333%
ってしたらどうなりますか？
「display: table」と「display: table-cell」は試した？
そもそも100%幅の親要素に隙間が出来ていたりしませんか？iPad safariに対してCSSリセットが足りていないとか。
関連するトピックス