HTML / CSS左右div并排在Chrome上，但在Safari / Firefox上不

Question

我很难在Firefox和Safari中并排对齐div，但是在Chrome中效果很好。 很难给出所有的CSS，因为我有一个移动样式表，一个普通的样式表，然后是一个有问题的样式表。 其他样式表效果很好。 如果需要更多信息来解决此问题，请告诉我。

我的网站位于http://bidonmoving.com/Template1/website.php了解更多详细信息

Chrome页面的图片：

Firefox页面的图像：

我的HTML设置基本上如下：

<div class="page">
    <div class="content">
                    <div class="left-content"></div>
                    <div class="right-content"></div>
            </div>
    </div>

CSS是：

.page {
    clear:both;
    background-image: none;
    background-color:none;
    margin: 50px auto;
    margin-left:30px;
    border:0;
    outline:none;
}
.content {
    clear: both;
    margin: 0px auto;
    width: 1000px;
    background: #ccc;
    position: relative;
    border:0;
    outline:0;
    -webkit-box-shadow:none;
    -webkit-box-shadow:none;
}
.left-content{
    width:450px;
    text-align:left;
}
.right-content{
    width:450px;
    position:absolute;
    margin-top:0px;
    padding-top:0px;
    margin:0px;
}

Answer 1

将您的CSS更改为-

.left-content{
    width:450px;
    text-align:left;
    float:left;
 }
 .right-content{
    width:450px;
    float:right; (or float:left and some margin-left)
  }

Answer 2

将您的CSS更改为此

.left-content{
    width:450px;
    display:inline-block;
vertical-align:top;
margin-top:0px;
    padding-top:0px;
margin-right:auto;
margin-left:auto;

}
.right-content{
    width:450px;
    display:inline-block;
vertical-align:top;
    margin-top:0px;
    padding-top:0px;
margin-right:auto;
margin-left:auto;

}

Answer 3

我通过在.right-content中添加一个顶级CSS元素解决了该问题，但是这使Chrome的右侧下降了很多，并将问题从所有其他浏览器转移到了Chrome本身。 我使用css hack来使Chrome正常运行，从我看来，Chrome的运行非常出色。