Навигация разбивается на масштабирование

Я уже нашел несколько тем с той же проблемой, что и у меня, но они мне не помогли. Когда я увеличиваю масштаб на 25%, моя последняя навигационная кнопка ломается на следующей строке.Навигация разбивается на масштабирование

Это мой код.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

<html> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" /> 
<meta name="keywords" content="" /> 
<meta name="description" content="" /> 
<link rel="stylesheet" type="text/css" href="style.css" /> 
</head> 
<body> 

<div id="menu"> 
    <nav> 
     <ul> 
      <li><a href="#">Link 1</a></li> 
      <li><a href="#">Link 2</a></li> 
      <li><a href="#">Link 3</a></li> 
      <li><a href="#">Link 4</a></li> 
      <li><a href="#">Link 5</a></li> 
      <li><a href="#">Link 6</a></li> 
     </ul> 
    </nav> 
</div> 

</body> 
</html> 

    body 
{ 
    background-color: #000000; 
    margin: 0; 
} 

li 
{ 
    float: left; 
    background-color: #FFFFFF; 
    list-style: none; 
    background-color: #00514C; 
    font-weight: bold; 
    font-family: "Calibri"; 
    width: 160.8px; 
    text-align: center; 
    display: inline; 
    line-height: 30px; 
    border-right: 2px solid #FFFFFF; 
} 

li a 
{ 
    color: #FFFFFF; 
    text-decoration: none; 
    display: block; 
    line-height: 
} 

li:hover 
{ 
    background-color: #C0C0C0; 
} 

li:last-child 
{ 
    border-right: none; 
} 

ul 
{ 
    position: relative; 
    margin-left: -40px; 
} 

#menu 
{ 
    position: relative; 
    width: 975px; 
    height: 30px; 
    margin: 0 auto; 
}

Может кто-нибудь мне помочь?

Большое спасибо!

источник

2013-10-11 user2871190

Похоже, это проблема округление/отношение, когда вы увеличивать и уменьшать масштаб. (25%)

Когда вы увеличиваете или уменьшаете масштаб изображения, вы столкнетесь с проблемами из-за округления и рендеринга текста. Это хорошая идея, чтобы убедиться, что макет может выдержать немного растяжения без разрушения.
Относительное позиционирование зависит от вопросов, упомянутых в № 1, и поэтому ненадежно.
Изучите использование чего-то, чтобы удалить свойства, которые будут применяться различными браузерами . Вы можете использовать сброс, чтобы дать вам что-то более работоспособным или попытаться нормализовать значения, чтобы сделать их более равномерными между браузерами.

По Изменение строки ниже в файле CSS (Li, ул) будет решить эту проблему в Firefox, Chrome и т.д.
Изменение ширины: 135px и Добавить поле: 2px

li 
{ 
    float: left; 
    background-color: #FFFFFF; 
    list-style: none; 
    background-color: #00514C; 
    font-weight: bold; 
    font-family: "Calibri"; 
    width: 135px; 
    margin: 2px; 
    text-align: center; 
    display: inline-block; 
    line-height: 30px; 
    border-right: 2px solid #FFFFFF; 
}

Меньший в Хром (уль ширина установлена на 822px в css)

ul 
{ 
    width: 822; 
    margin-left: -40px; 
    position: relative; 
}

источник

2013-10-12 01:06:01 Jocelyn

Благодарим за помощь! – user2871190

Попробуйте использовать divs с дисплеем: таблица и дисплей: table-cell.

<div id="menu"> 
<nav> 
    <div class="box"> 
     <div><a href="#">Link 1</a></div> 
     <div><a href="#">Link 2</a></div> 
     <div><a href="#">Link 3</a></div> 
     <div><a href="#">Link 4</a></div> 
     <div><a href="#">Link 5</a></div> 
     <div><a href="#">Link 6</a></div> 
    </div> 
</nav> 
</div> 

body 
{ 
background-color: #000000; 
margin: 0; 
} 

.box div 
{ 
display: table-cell; 
background-color: #FFFFFF; 
background-color: #00514C; 
font-weight: bold; 
font-family: "Calibri"; 
text-align: center; 
line-height: 30px; 
border-right: 2px solid #FFFFFF; 
} 

a 
{ 
color: #FFFFFF; 
text-decoration: none; 
display: block; 
line-height: 
} 

.box div:hover 
{ 
background-color: #C0C0C0; 
} 

.box div:last-child 
{ 
border-right: none; 
} 

.box 
{ 
display: table; 
width: 100%; 
} 

#menu 
{ 
position: relative; 
width: 975px; 
height: 30px; 
margin: 0 auto; 
}

jsfiddle

источник

2013-10-11 14:01:19

Благодарим за помощь. Я использовал «display: block», чтобы добиться того, что вы можете щелкнуть навигацию повсюду. С этим я должен щелкнуть по ссылке. Есть ли способ избежать этого? – user2871190

Я не менял отображение: block; в теге 'a' вы все равно можете это сделать, если вы не хотите, чтобы он просто удалял отображение: block; или изменить его для отображения: inline-block ;. Я не уверен, что это то, о чем вы просите. –

Большое спасибо, я смог решить мою проблему. – user2871190

Навигация разбивается на масштабирование

ответ

Смежные вопросы