Я запускаю небольшой основной навигационный тест по адресу http://tools.weddingideasmag.com/MainNavTest/
Беда в том, что я не могу заставить высоту меню переходов работать в IE8.
Это то, что страница выглядит как на Chrome, и отображает...
здесь версия IE8...
Может кто-нибудь помочь, он почти отсортирован, но я не могу понять эту ошибку
Привет, прошел через ваш css
узнали, что у вас flatnavie.css
у тебя есть
.single-height {
/*height: 230px;*/
}
.double-height {
/*height: 400px;*/
}
Хорошо, используйте это
.single-height {
height: 200px;
max-height: 800px;
}
Добро пожаловать в Internet Explorer. Наслаждайтесь своей дорогой!
У меня такая же проблема, и я решил ее, потому что мой doctype недействителен.
Если у вас плохой doctype, IE будет работать в другом режиме, чем ожидалось.
Просто поместите <!DOCTYPE html>
и все будет хорошо, и добавьте <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
в <head>
.
Надеюсь, это может быть немного полезно.
Проблема на самом деле исходит от JavaScript в flatnav.js
. Там какой-то код в том файле, который предназначен для того, чтобы сделать все столбцы в подменю одинаковой высоты:
$(window).load(function(){
$('.flat-nav>ul>li').mouseover(function() {
var x = 0;
$(this).children('ul.column-based').children('li').each(function() {
if(this.offsetHeight > x) {
x = this.offsetHeight;
}
});
$(this).children('ul.column-based').children('li').each(function() {
$(this).css("height", x + "px");
});
// more code...
});
});
Кажется, что x
вычисляется слишком рано в IE8, что приводит к очень малой высоте для меню.
Хотя могут быть исправления для этого JS. Я бы предпочел делать "равные высоты столбцов" в CSS, так как он хорошо работает в вашем случае. Попробуйте прокомментировать/удалить JS выше, а затем добавить нижнюю часть flatnav.css
:
div.flat-nav ul.column-based > li {
display: inline-block;
vertical-align: top;
float: none;
width: 145px;
}
Попробуйте здесь: http://jsbin.com/OJiGiQoF/2