Я создаю веб-страницу с логотипом и меню в шапке.Когда я уменьшаю или уменьшаю масштаб, некоторые пункты меню переходят во второй ряд, когда они должны оставаться в одном ряду.Это происходит в Chrome, но не происходит в Firefox.
Чтобы проиллюстрировать это, я взял фрагмент своего кода.Следующий HTML и CSS создает синее поле с 8 пунктами меню.Когда я увеличиваю или уменьшаю масштаб в Firefox, в одном ряду всегда есть 8 пунктов меню, независимо от того, сколько масштабов я применяю.Однако, если я уменьшу масштаб в Chrome несколько раз, иногда последний пункт меню будет переходить на второй ряд.Ряд пунктов меню меняет ширину относительно ширины окна меню (тогда как в Firefox соотношение ширины остается неизменным).
Я думаю, что лучший способ понять, о чем я говорю, этопросмотрите следующий код в Chrome и Firefox и несколько раз увеличьте и уменьшите масштаб, чтобы увидеть, что происходит.
Я хочу, чтобы происходящее в Firefox было воспроизведено в Chrome.Кто-нибудь может подсказать, как мне этого добиться?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<style>
#header {
width: 1000px;
margin: 0 auto;
height: 96px;
position: relative;
background: blue;
}
#menu {
display: block;
position: absolute;
left: 119px;
}
#menu li {
display: block;
float: left;
padding: 0 8px 0 14px;
text-transform: uppercase;
letter-spacing: -1px;
font: 14px/27px Arial, Helvetica, sans-serif;
background-color: transparent;
}
</style>
</head>
<body>
<div id="header">
<div id="menu">
<ul>
<li>menu item 1</li>
<li>menu item 2</li>
<li>menu item 3</li>
<li>menu item 4</li>
<li>menu item 5</li>
<li>menu item 6</li>
<li>menu item 7</li>
<li>menu item 8</li>
</ul>
</div>
</div>
</body>
</html>