css - 他のズーム レベルで、li 内のフローティング アイテムがクロムでラップされるのはなぜですか?

Question

タブリストとして使用しているulwith s があります。liにはli、画像とテキストが含まれています。何らかの理由で、クロムでは、テキストが画像と同じ行に表示されず、次の行に折り返されます。

なぜこれが起こるのか理解できません。画像とテキストの両方に収まる十分なスペースを確保するために、li を拡張するべきではありませんか? この問題は、Firefox や IE では発生しません。Windows 7 上の Chrome 22、Firefox 16、および IE 9 でのテスト。

マークアップを確認するには、このフィドルを参照してください (長いページから抽出されたもので、実際のアイコンではありません)。

この問題に似ているように聞こえますが、このnowrapトリックはうまくいきませんでした。

更新: ズーム レベルが 144% に設定されていることに気付きました。問題が発生するズーム レベルと発生しないズーム レベルがあります。一部のサイズではems、他のサイズではpxと関係があるのではないでしょうか？なぜこれが起こるのかはまだわかりませんが、適切な量のスペースを確保するべきではありませんか?

Answer 1

ヘッダーの最小幅を設定します。ブラウザのサイズを小さくした場合にも問題が発生します。スタックが始まる前にどれだけ小さくできるかを把握し、ヘッダーの最小幅をそのサイズに設定します。これにより、ブラウザーもズームされている場合に修正されます。