これをWebkit bugzilla (完全な CSS と HTML を含む)に 1 週間前に送信しましたが、今のところ応答がありません。それまでの間、何かおかしいことをしているのが私なのか、それとも Webkit なのかを知りたいと思います。この違いの正確な原因についての回答を探しているだけで、すでに回避策を見つけました。
これが私が経験していることです：（
ソース：mindcontrol.nl）
Chrome 10.0.648.204、Safari 5.0.3 (7533.19.4)、Firefox 4.0、IE 8 のバージョンでテスト済み。
関連コードです。周囲のオブジェクトが問題を引き起こしているかどうかを確認するために、HTML でこのコードを既に分離しましたが、問題は残っています。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
[...]
<div id="top">
<div id="logo">
<a href=""><strong><span style="color: #005288;">pre</span><span style="color: #00aeef;">view</span></strong> <span style="color: #fcaf17;">website</span></a>
</div>
<div id="topmenu">
<ul>
<li><a href=""><span>over</span> ons</a></li>
<li><a href=""><span>onze</span> partners</a></li>
<li><a href="">contact</a></li>
<li><a href="">helpdesk</a></li>
</ul>
</div>
<div style="clear: both;"></div>
</div>
そしてCSS：
#container, #top, #contentcontainer {
padding: 12px;
}
#logo {
float: left;
margin: 0;
font-size: 2em;
letter-spacing: -2px;
}
#topmenu ul, #mainsubmenu ul {
margin: 0;
padding: 0;
list-style-type: none;
}
#topmenu li, #mainsubmenu li {
display: inline;
}
#topmenu li {
margin-left: 20px;
}
#topmenu li:first-child {
margin-left: 0;
}
#topmenu a {
color: #005288;
}
#topmenu a:hover {
color: #00aeef;
}
#topmenu a span {
color: #005288;
}
まず、すべての div を測定して、Gecko と Webkit の両方で自動計算されたサイズが同じかどうかを確認しました。幅の測定値はすべてまったく同じです (もちろん、Webkit では高さが異なります)。Chrome の Firebug lite と Firefox (4) DOM-inspector では 390 ピクセルです。
これらの 390 ピクセルでは完全なリストに収まらない場合でも、div は単純に左側に拡張できます。これは、フォントのレンダリングが少し異なる場合や、
また奇妙なのは、私が削除すると
#topmenu li:first-child {
margin-left: 0;
}
リストの最初の要素の位置には何もしません。代わりに、 2行目の LI の位置を変更します。「Helpdesk」は「Over ons」と奇妙に一致します。
私の回避策: トップメニュー DIV の固定幅を少なくとも 390 (現在の幅) に加えて 20 ピクセル (最初の子を使用して削除するマージン) の固定幅を 410 ピクセルの最小合計固定幅に定義すると、すべての要素が同じままになります。ライン。
これについてみんなの意見を聞くのが大好きです。
