具有相似 CSS 的 div 和 table 兄弟的位置不同

Question

我有一个table 和一个div，它们应该以相同的宽度和相同的左侧位置显示。

但是，桌子被什么东西推到了右边。它没有出现在 Firebug 中，我不知道是什么原因造成的。

我将附上 Firebug 控制台的图片，而不是在这里复制所有代码。

这是对齐的 div 应该如此：

这是向右碰撞的表格：

如果这可能是一个问题，#content 的 CSS 是：

#content {
    margin-top: 0.5em;
}

.center {
    margin-left: auto;
    margin-right: auto;
}

div {
    position: relative;
}

#page 的 CSS 是：

#page {
    -moz-border-bottom-colors: none;
    -moz-border-image: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background-color: #FFFFFF;
    border-color: -moz-use-text-color #C5CAE8;
    border-left: 0.0625em solid #C5CAE8;
    border-right: 0.0625em solid #C5CAE8;
    border-style: none solid;
    border-width: medium 0.0625em;
    margin: auto;
    min-height: 30.5em;
    padding: 3em 0;
    width: 64em;
}

.clear {
    display: block;
}

div {
    position: relative;
}

如有需要，我可以为更多家长发布 CSS。

我复制了代码to this jsfiddle，问题很明显。

Answer 1

我认为您的问题是由于您的<div id="image"></div> 导致您的桌子向右推，因为 div 太高了。如果你把它变小或移除它，你的桌子就会一直向左移动。如果您随后从您的 table 样式中删除 position:relative，您将获得您想要的结果。

免责声明：仅在 Chrome 12 中测试 :)

Answer 2

我在您的 jsfiddle.net 示例中看到了 Safari 中的问题。尝试将overflow: hidden 添加到

<div class="gutter message-box center w75 alert">

块。这使得<div> 和下面的<table> 为我排好队。但是这对不与标题对齐。但是，如果您从<div> 和<table> 中删除center 类，则一切都开始正常排列。我怀疑您遇到了浮动问题（因此使用了 overflow: hidden 技巧）和一些战斗边缘（杀死 center 已修复）的组合。

我仍然看到<table> 存在小宽度问题，但以上内容应该可以帮助您入门。