ie7显示:内联

Question

我知道这个问题已经被问了一百次了，我感觉我已经看完了所有的100个帖子，但这让我发疯。

我发誓这是我做的最后一个符合IE7的网站。浪费了太多的钱。我邀请您也这样做。我仍然在等待微软的支票，对你为我们的垃圾软件开发而损失的所有金钱表示歉意。

不管怎么说！不得不大喊大叫。

问题是，display:inline对我来说并不合适。我正在运行这个页面的IE7编辑：http://www.buxback.com/和标题导航只是做了一些奇怪的事情，我不能理解。

如果你将鼠标悬停在它的工作原理上(当然是在ie7中)，你会注意到页面两边都有两个白条和一个子菜单。有一些东西(假设)导致包含文本的中间div充当块元素。我想应该是中间的那个div。我完全不知所措。

如果你在firefox上看，你可以看到它是如何行动的。

任何帮助都将不胜感激。

谢谢!

Answer 1

似乎我需要让几乎所有的东西都有一个位置:relative，display:inline，zoom:1 for internet explorer ie7。

你知道，当通用汽车生产不好的产品时，他们会召回。为什么微软不召回IE6和7？

Answer 2

首先，Ffox中的JavaScript错误：

"Error: browser is not defined
Source file: http://www.buxback.com/wp-content/themes/buxback/js/fontreplace.js?ver=1.0
Line: 1"

最好在信任任何浏览器与任何进一步的谈判之前解决这个问题！

接下来(注意这个页面加载和响应很慢)，我建议对嵌套元素使用绝对定位，对任何嵌套元素的父容器使用相对定位。这将使菜单脱离文档流程，并允许您为其分配z索引属性-因为您的菜单当前在UPS的Flash广告(右侧)下打开。

同样，这个页面菜单在几个浏览器上的响应速度都非常慢，你可能需要调查一下原因--也许你有很多不必要的事件监听器在运行？也许在mouseover事件期间有太多的处理？我想每当我将鼠标移到菜单项上时，我都会在IE7的页面标签上看到“正在加载”的符号--所以每次都会有一些服务器的工作在进行。

最后，不要在IE6中加载你的页面:P

Answer 3

好了，下面是在IE7 (和所有其他浏览器)中水平居中显示列表的确切方法。

演示- http://jsfiddle.net/iamtyce/XH2A6/。

HTML

<div id="menu-outer">
    <div id="menu-table">
        <ul id="horizontal-list">
            <li><a href="#">First</a></li>
            <li><a href="#">Second</a></li>
            <li><a href="#">Third</a></li>
            <li><a href="#">Fourth</a></li>
        </ul>
    </div>
</div>

CSS

div#menu-outer {}

div#menu-outer div#menu-table {
    display: table;   /* Allow the centering to work */
    margin: 0 auto;
    padding: 10px;
}

ul#horizontal-list {
    margin: 0 4px;
    padding: 0;
    list-style: none;
    text-align: center;
}

ul#horizontal-list li {
    display: inline;
    position: relative;
    zoom: 1;
}

ul#horizontal-list li a {
    text-decoration: none;
    padding: 6px 10px;
    color: #818181;
    background: #f5f5f5;       
}

ul#horizontal-list li a:hover {
    color: #515151;
    background: #e5e5e5;  
}