IE8中的CSS高度问题
[英]CSS height issues in IE8
问题描述
I'm running a little main navigation test at http://tools.weddingideasmag.com/MainNavTest/ 
我正在http://tools.weddingideasmag.com/MainNavTest/上运行一些主要的导航测试
The trouble is, I can't get the drop menu height to work right in IE8. 问题是，我无法使下拉菜单的高度在IE8中正常工作。
This is what the page looks like on Chrome and is displaying fine… 这是该页面在Chrome上的外观，并且显示正常…
here's the IE8 version… 这是IE8版本...
Can anyone help please, it's almost sorted but I can't figure out this bug 任何人都可以帮忙，它几乎已经排序了，但我不知道这个错误
3 个解决方案
解决方案1
1 2013-12-19 11:58:44
Welcome to Internet Explorer. 欢迎使用Internet Explorer。 Enjoy your road! 享受你的路！
I got the same problem, and I resolved it because my doctype wasn't valid. 我遇到了同样的问题，我解决了这个问题，因为我的文档类型无效。
If you got a bad doctype, IE will go on a different mode than expected. 如果您的文档类型错误，则IE将采用与预期不同的模式。
Just put <!DOCTYPE html> and it will be fine and add <meta http-equiv="X-UA-Compatible" content="IE=edge" /> on the <head> . 只需放入<!DOCTYPE html> ，就可以了，并在<head>上添加<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <head> 。
Hope this can be a little bit helpful. 希望这会有所帮助。
解决方案2
0 已采纳 2013-12-19 12:50:45
Hi Have gone through your css 嗨，经历了你的CSS
found out that in you flatnavie.css 在你身上发现flatnavie.css
you have 你有
.single-height {
/*height: 230px;*/
}
.double-height {
/*height: 400px;*/
}
Just uncomment that & it is working 只是不评论＆它正在工作
UPDATED 更新
OK, use this 好，用这个
.single-height {
height: 200px;
max-height: 800px;
}
解决方案3
0 2013-12-19 16:34:37
The problem is actually coming from the JavaScript in flatnav.js . 问题实际上出在flatnav.js的JavaScript。 There's some code in that file that is intended to make all columns in a submenu the same height: 该文件中有一些代码旨在使子菜单中的所有列都具有相同的高度：
$(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...
});
});
It seems that x is being calculated too early in IE8, resulting in a very small height for the menus. 似乎x在IE8中计算得太早了，导致菜单的高度很小。
While there might be fixes for that JS. 虽然可能有该JS的修复程序。 I'd prefer to do the 'equal column heights' in CSS since it works well in your case. 我更喜欢在CSS中执行“相等的列高”，因为它在您的情况下效果很好。 Try commenting out/removing the JS above, then add the following to the bottom of flatnav.css : 尝试注释掉/删除上面的JS，然后将以下内容添加到flatnav.css的底部：
div.flat-nav ul.column-based > li {
display: inline-block;
vertical-align: top;
float: none;
width: 145px;
}
Try it here: http://jsbin.com/OJiGiQoF/2 在这里尝试： http : //jsbin.com/OJiGiQoF/2
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.