Question

我正在为我的妹妹写一个网站，我遇到了跨浏览器兼容性的问题。也就是说，我正在使用的菜单是在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;
}

Answer 1

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

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

我实际上并没有在您的网站布局中看到哪些表格是必需的。这是非常基本的。如下所示：

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

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

Answer 2

我很惊讶你的菜单甚至在任何浏览器中显示，当你向左推-630px时。如果你想要定位你的菜单div只是使用边距作为上/左定位，如果没有相对于容器正确设置，将推送相对于页面主体的东西。

所以，改变一下：

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

对于这样的事情：

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

在Internet Explorer中屏幕加载菜单

2 个答案: