Question

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

我发誓这是我将要做的最后一个IE7兼容网站。浪费了太多钱。我邀请你这样做。我还在等待微软的支票，因为我很遗憾忘记了我们丢失的所有资金。

反正！不得不咆哮。

问题是，显示：内联不适合我。我正在浏览此页面的IE7编辑：http://www.buxback.com/并且标题导航只是做了一些我无法解决的奇怪事情。

如果你将鼠标悬停在工作原理（当然是ie7），你会发现页面两侧有两个白条和一个子菜单。有一些东西（据说）导致包含文本的中间div充当块元素。我认为这是中间的div。我完全失去了。

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

任何帮助都将不胜感激。

谢谢！

Answer 1

似乎我需要让几乎所有东西都有位置：相对，显示：内联，缩放：1为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-index属性 - 因为您的菜单当前在下面打开了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;  
}

ie7显示：内联

3 个答案: