Safari でのみ発生する奇妙な問題に遭遇しました (Mac では 7 - Windows についてはわかりません)。
ユーザーが縮小すると、ヘッダーの上にスペースが表示されます。100% (ズームなし) またはズームインすると、スペースがありません。
過去の経験から、私は padding-top (うまくいきませんでした) と border-top を追加してみることにしました。
だから - ここの誰かが私に説明してくれることを願っています:
- ボーダートップがこれを修正する理由を知っていますか?
- これは Safari のバグですか、それとも私が何か誤解しているのでしょうか?
- これを修正するより良い方法はありますか？この特定のクライアントにとって、ボーダートップは問題になるでしょう。よりクリーンな解決策を見つけたいと思います。
HTML:
<!DOCTYPE html>
<html>
<head>
<title>My Title</title>
</head>
<body>
<div id="headerwrapper">
<div id="headerliner">
<header>
<nav class="menu">
<ul>
<li><a href="#">Top Level Menu Item</a>
<ul class="sub-menu"><li><a href="#" >Child Menu Item</a></li></ul>
</li>
</ul>
</nav>
</header>
</div>
</div>
</body>
</html>
CSS:
html, body {
margin: 0;
padding: 0;
}
#headerwrapper {
margin: 0;
padding: 0;
}
#headerliner {
margin: 0;
padding: 0;
}
header {
background: black;
margin: 0 auto;
padding: 1px 0 0 0;
/* Remove the below line, and the space appears in Safari */
border-top: 1px solid black;
}
