- 締切済み
各ブラウザでの絶対配置の違いについて
今フルCSSで絶対配置を一部使いコーディングをしているのですが、絶対配置で組むと各ブラウザで位置が合っていません。 【参考内部ソース】 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>無題ドキュメント</title> <style type="text/css"> <!-- #a { background: #0066CC; height: 100px; width: 100px; position: absolute; left: 10px; top: 200px; } body { margin: 0px; padding: 0px; } #b { background: #CCCC00; height: 150px; width: 150px; top: 30px; position: absolute; left: 10px; } --> </style> </head> <body> <div id="a"> a </div> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <div id="b"> b </div> <p>6</p> <p>7</p> <p>8</p> <p>9</p> <p>10</p> </body> </html> 左の数字と組み合わせてＢＯＸを見るとIEとFoxではずれているのがわかると思います。どなたかこの解決法がわかる方いたら宜しくお願いします。
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- HIRSYU
- ベストアンサー率51% (45/87)
<p>タグの表示方法がIEとFirefoxで違います。 Firefoxだと、1行目に<p>タグがくると改行後に、IEは改行なしで始まっています。 ですので、<div>タグの位置がずれているのではなく、1～10の数字がずれています。 後は、ブラウザ設定（文字大きさ、行間）次第で1～10の数字がブラウザ毎にずれます。
