Вёрстка « Ломается верстка только в Google Chrome. Как исправить?
Ломается верхнее меню (ссылка Контакты съезжает на второю строчку), только в браузере Google Chrome 38.0. В IE11, Mozilla Firefox 32 и браузере Mail.ru (webkit, тотже Chrome) все ОК. Почему так происходит? Как можно исправить только для Хрома?
В других браузерах:
В других браузерах:
1 ответов
Много ошибок в css. Уберите float'ы у элементов меню.
На скорую руку вот поправил, то, что закомментировано - или тоже закомментируйте, или удалите:
.menutop {
display: table;
width: 100%;
/* padding уберите */
}
/* полностью уберите это
.menutop li.root {
width: auto;
float: left;
height: 30px;
}
*/
.menutop li {
list-style: none outside none;
/* width: auto; уберите */
/* height: 30px; уберите */
display: table-cell;
}
.menutop li.root > .item {
display: block;
/* float: left; уберите */
/* width: auto; уберите */
height: 30px;
line-height: 30px;
text-align: center;
white-space: nowrap;
}
.menutop li:hover > .item {
background-color: #FFF;
/* из-за этого скачет при наведении
border-width: 1px;
border-style: solid;
border-color: #FFF;
*/
}
display: table;
width: 100%;
/* padding уберите */
}
/* полностью уберите это
.menutop li.root {
width: auto;
float: left;
height: 30px;
}
*/
.menutop li {
list-style: none outside none;
/* width: auto; уберите */
/* height: 30px; уберите */
display: table-cell;
}
.menutop li.root > .item {
display: block;
/* float: left; уберите */
/* width: auto; уберите */
height: 30px;
line-height: 30px;
text-align: center;
white-space: nowrap;
}
.menutop li:hover > .item {
background-color: #FFF;
/* из-за этого скачет при наведении
border-width: 1px;
border-style: solid;
border-color: #FFF;
*/
}