2011-07-15 10 views
0

テンプレートをHTML5に更新していて、Chromeで奇妙な問題が発生しています。私は順序付けされていないリストを<nav>の要素に入れて、それらを少しずつ分離するためのパディングを追加しました。 <nav>の幅は、IE9、FF5、Chrome(現在)の3つすべてのブラウザーにすべてのリスト項目を含めるには十分です。なぜChromeはFirefoxやIE以上のインラインリストアイテムをラップしますか?

ただし、Chromeはアイテムを2行にラップする唯一のものです。

http://www.tubbs.org.uk/html5/

任意のアイデアここで何が起こっているかのよう:

ここでテストレイアウトですか?トップバーをFirefoxで壊れている

+0

"main" *と* "box"に相当する "main box"のようなクラス名を使用しています。 「mainBox」などに変更してください。あなたの修正かもしれません。よろしく、 – Teson

+0

@ user247245:これは設計によるものです。メインのnav要素はクラスmainによって区別され、視覚的な書式設定が必要なボックスでもあります。 –

答えて

1

http://www.tubbs.org.uk/html5/

(その色は、プリプロセッサをしてきた前に、私はDokuWikiのスタイルシートを使用することから、多くの、多くのエラーが原因で、ところで、知っています。) 6.0ベータ版も同様です。

私が気づいたことの1つは、割合の埋め込みを使用していることです。これは、一般的にブラウザ間の互換性にとっては悪い考えです。

代わりにパディングのためのピクセル値を使用してみてください:0 1.5%対0 10pxの

+0

パディングを 'nav.main li'と' nav li'のピクセルに固定すると、これで問題は解決します。 – alquatoun

+0

残念ながら私にとってはそうではありません。私は両方を10pxに設定していますが、上のスペースにもかかわらず、2番目の行には最後のリンクがあります。同じ1emで発生し、一方、ページの上部に接続されたバーは、すべての機能を持つ。 –

+0

nav.main li { 埋め込み:0 8px; } –

0

クロムは、2つの異なるルールからパディングを適用しているようだ: nav.main李(3%)、それが無効になっていた場合、それが適用されますnav liからのパディング(1.5%)。両方のルールを無効にすると、それらのルールはすべて1つの行に表示されます。

Webkitがパディング:行をどのように解釈しているのでしょうか。 パディング - 左、パディング - 右を試してみて、それが役立つかどうか確認してください。

クロム開発者のツールキット(Ctrl + Shift + I)を使用して、さまざまなスタイルを有効または無効にして適用方法を確認することもできます。

+0

True;パディングが含まれていない場合は、1行に描画されます。私はFF5とIE9がこの "正しい"を得る原因になっているのか疑問に思っています。一方、Chrome(そして今はFF6、明らかに)はラップする必要があると思います。 –

+0

わかりません。 WebkitブラウザはIE9やFF5とは異なる種類のブロックとして扱っているのではないかと思います。 –

関連する問題