ie7 display：inline

Question

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

我发誓这是我将要做的最后一个符合IE7的网站。 浪费了太多钱。 我邀请您也这样做。 对于您因开发我们的废话软件而损失的所有金钱，我仍在等待Microsoft的检查。

无论如何！ 不得不咆哮。

问题是display：inline不适合我。 我正在通过IE7编辑此页面： http : //www.buxback.com/ ，标题导航只是在做一些我无法解决的奇怪事情。

如果将鼠标悬停在“如何工作”（当然，在ie7中）上，您会注意到页面两侧的两个白色条和一个子菜单。 （据说）某种原因导致包含文本的中间div用作块元素。 我认为那是那个中间的div。 我完全不知所措。

如果您看的是Firefox，您会发现应该怎么做。

任何帮助，将不胜感激。

谢谢！

Answer 1

似乎我需要使几乎所有内容都具有一个位置：相对，显示：内联，缩放：Internet Explorer ie7的位置：1。

你们知道，当通用汽车制造出不良产品时，他们就会召回。 微软为什么不召回IE6和7？

Answer 2

好的，这是在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;  
}

Answer 3

首先，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