在 Internet Explorer 中屏幕外加载菜单答案

【问题标题】：Menu loading off-screen in Internet Explorer在 Internet Explorer 中屏幕外加载菜单
【发布时间】：2011-09-26 10:35:03
【问题描述】：

我正在为我姐姐写一个网站，但在跨浏览器兼容性方面遇到了一点麻烦。也就是说，我正在使用的菜单在 Internet Explorer 中加载一半屏幕外，而在 Chrome 中看起来很好。我试过弄乱对齐方式，但我有点碰壁，无论你使用什么浏览器，我都不知道如何让它加载到同一个位置。当您查看该站点时，您会明白我的意思：www.claireharbage.com。画廊上方的菜单应与画廊的左侧对齐。提前感谢您对此提供的帮助，非常感谢。

这是包含菜单的代码部分：

<table width="900" height="704" bgcolor="#222222"> 
<tr> 
<td width="76" height="39" valign="baseline">&nbsp;</td> 
<td width="629" valign="baseline"></td>
<p class="heading"><a href="http://www.claireharbage.com">CLAIRE HARBAGE</a></p>
<td width="50" valign="baseline">
<div id="menu">
<ul class="menu">
    <li><a href="#" class="parent"><span>Work</span></a>
        <div><ul>
            <li><a href="/Something.html"><span>Something to Hold On To</span></a></li>
            <li><a href="/graf_town.html"><span>Graf-Town</span></a></li>
            <li><a href="/Leaving.html"><span>Leaving Neverland</span></a></li>
            <li><a href="/punk.html"><span>Pittsburgh Punk</span></a></li>
            <li><a href="/5.html"><span>A Place to Stay</span></a></li>
        </ul></div>
    </li>
    <li><a href=""><span>About</span></a>
    </li>
    <li><a href="#"><span>Wedding</span></a></li>
    <li class="last"><a href="http://claireharbage.blogspot.com/"><span>Blog</span></a></li>
</ul>

这里是影响菜单位置的 CSS 代码：

#menu {
    position:relative;
    z-index:100;
    height:16px;
}

div#menu {
    top:40px;
    left:-630px;
    width:450px;
}

#menu .menu {
    position:relative;
    top: -1px;
}

#menu * {
    list-style:none;
    border:0;
    padding:0;
    margin:0;
}

#menu a {
    display:block;
    padding:8px 14px 8px 14px;
    white-space:nowrap;
}

#menu li {
    float:left;
    background:#fff;
}

【问题讨论】：

标签： html css cross-browser

【解决方案1】：

首先，我个人并不推荐使用表格来控制网站布局。相反，我更喜欢 CSS。您还在表格上使用了很多内联样式，这使得调试变得困难。

由于某种原因，我无法确定麻烦的 CSS，但看起来您表格中的内容是居中对齐的。然后，您使用负左 css 属性将菜单内容拉回表格边缘。

我实际上并没有在您的网站布局中看到需要表格的地方。这是非常基本的。所以像：

<div id="header" />
<div id="menu" />
<div id="slideshow />
<div id="footer" />

应该为您提供您想要的内容布局，而无需使用表格的所有麻烦。

【讨论】：

【解决方案2】：

当您将菜单向左推 -630 像素时，我很惊讶您的菜单甚至在任何浏览器中都显示。如果您要定位菜单 div，只需使用边距作为顶部/左侧定位，如果相对于容器未正确设置，则会相对于页面主体推送内容。

所以，改变这个：

div#menu {
    top:40px;
    left:-630px;
    width:450px;
}

这样的：

div#menu {
    margin:40px 0 0 20px; //position as you see fit
    width:450px;
}

【讨论】：