只是取消注意＆amp;它正在运作

Question

我正在http://tools.weddingideasmag.com/MainNavTest/

进行一次主导航测试

麻烦的是，我无法让IE8中的下拉菜单高度正常工作。

这就是Chrome浏览器上显示的内容，显示效果很好......

enter image description here

这是IE8版本......

enter image description here

任何人都可以帮助，它几乎排序但我无法弄清楚这个错误

Answer 1

欢迎使用Internet Explorer。享受你的道路！

我遇到了同样的问题，因为我的doctype无效，我解决了这个问题。

如果你的doctype不好，IE将采用与预期不同的模式。

只需添加<!DOCTYPE html>即可，并在<meta http-equiv="X-UA-Compatible" content="IE=edge" />上添加<head>。

希望这会有所帮助。

Answer 2

你好了你的css

发现你在flatnavie.css

你有

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

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

只是取消注意＆amp;它正在运作

已更新

好的，请使用此

.single-height {
height: 200px;
max-height: 800px;
}

Answer 3

问题实际上来自flatnav.js中的JavaScript。该文件中有一些代码用于使子菜单中的所有列具有相同的高度：

$(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...

  });
});

在IE8中似乎过早计算x，导致菜单的高度非常小。

虽然可能有针对该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

IE8中的CSS高度问题

3 个答案:

只是取消注意＆amp;它正在运作

已更新