Проблемы с высотой CSS в IE8

0

Я запускаю небольшой основной навигационный тест по адресу http://tools.weddingideasmag.com/MainNavTest/

Беда в том, что я не могу заставить высоту меню переходов работать в IE8.

Это то, что страница выглядит как на Chrome, и отображает...

Изображение 174551

здесь версия IE8...

Изображение 174551

Может кто-нибудь помочь, он почти отсортирован, но я не могу понять эту ошибку

  • 2
    Можете ли вы опубликовать нам код?
  • 0
    Привет, Мат - ты не можешь увидеть код через источник? Разве это не легче сделать, чем вставить много кода и CSS?
Показать ещё 1 комментарий
Теги:
internet-explorer-8

3 ответа

0
Лучший ответ

Привет, прошел через ваш css

узнали, что у вас flatnavie.css

у тебя есть

.single-height {
/*height: 230px;*/
}

.double-height {
/*height: 400px;*/
}

Просто раскомментируйте, что & он работает

ОБНОВЛЕНО

Хорошо, используйте это

.single-height {
height: 200px;
max-height: 800px;
}
Поделиться
  • 1
    Привет, Викас, я сделал это, потому что не хочу указывать фиксированную высоту. Если я это сделаю, все подменю имеют одинаковую высоту, но все они имеют разную длину содержимого.
  • 0
    Пожалуйста, смотрите обновленный код
1

Добро пожаловать в Internet Explorer. Наслаждайтесь своей дорогой!

У меня такая же проблема, и я решил ее, потому что мой doctype недействителен.

Если у вас плохой doctype, IE будет работать в другом режиме, чем ожидалось.

Просто поместите <!DOCTYPE html> и все будет хорошо, и добавьте <meta http-equiv="X-UA-Compatible" content="IE=edge"/> в <head>.

Надеюсь, это может быть немного полезно.

Поделиться
  • 0
    Привет Суши, попробовал это, но это не сработало :-(
  • 0
    Хм ... Я только что проверил IE8, и он отлично работает для меня ... Есть только отображение li, которое в некоторых случаях не очень хорошо. Вы уверены, что не в IE7?
0

Проблема на самом деле исходит от 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

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню