締切済み

safariで見るとページ上部に余白ができてしまう

2012/09/14 23:16

以下のhtmlとcssをChromeで見るとページ（サイト）上部に余白がないのですが、Safariで見ると余白ができてしまいます。どうやったら上部（と下部）の余白がどのブラウザでも表示されないようになりますでしょうか？初歩的な質問で申し訳ありませんがネットで検索してもわからなかったので、宜しくお願いいたします。 [html] <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" type="text/css" href="index.css" /> <title></title> </head> <body> <div id="wrap"> <div id="inner"> <div id="header"> <img src="image_basic/logo.png" width="450" height="140" alt="veggietimeslogo" /> <img src="image_basic/slide.jpg" width="920" height="450" alt="slide2" /> </div> <div id="mainwrap"> <div id="firstwrap"> <p>ここは一段目<br />ここは一段目<br />ここは一段目</p> </div> <div id="middlewrap"> <p>ここは二段目<br />ここは二段目<br />ここは二段目</p> </div> <div class="clear"><hr /> </div> </div> <div id="sidewrap"> <p>ここはサイドバー<br />ここはサイドバー<br />ここはサイドバー</p> </div> <div class="clear"><hr /> </div> <div id="footer"> </div> </div> </div> </body> </html> [css] @charset "UTF-8"; /* CSS Document */ body{ background-color:#000000; text-align:center; margin:0;} #wrap{ background-color:#ffffff; margin:0 auto; width:960px; text-align:left;} #inner{ margin:0 20px;} #mainwrap{ float:left; width:610px;} #firstwrap{ float:left; width:300px;} #middlewrap{ float:right; width:290px;} #sidewrap{ float:right; width:290px;} .clear{ clear:both;} .clear hr{ display:none;} p { font-family:Tahoma, Geneva, sans-serif}