DIV 定位 - 跨浏览器问题

Question

我有一个页面，左边应该有文本，右边应该有一个表单。它在大多数浏览器（包括 Firefox、Chrome 和 Safari）上都能正常显示（和呈现）。

然而，某些版本的 IE 将表单保持在正确的位置（右上角），但会将文本一直推到页面底部。

这是用于定位表单的代码：

.custom #conversion_form {
width: 300px;
border: 1px solid #999;
background-color: #e9e9e9;
padding: 25px 30px 25px 25px;
float: right;
display: block;
margin-left: 20px;
}

我需要添加哪些标签才能将文本保持在左上角/避免它被下推？

演示：http://rainleader.com/signup

屏幕截图（外观）：

Answer 1

我会创建两个 div，一个用于文本，另一个用于表单。

我总是在 left 属性上使用 center 50% 并使用 margin-left 或 marging-right 来独立于分辨率来处理 div 的位置。

看这个例子：

Div 为文本，将文本放在 div 内：

.div_left_text {
    position: absolute;
    width: 200px;
    height: 200px;
    left: 50%;
    margin-left:-250px;
    top: 15px;
}

表格的div，把表格放在这个div里面：

.div_right_form {
    position: absolute;
    width: 200px;
    height: 200px;
    left: 50%;
    margin-right:250px;
    top: 15px;
}

这应该创建两个区域，一个在左边另一个在右边独立。

Answer 2

当您创建并排效果时，最好将左侧内容向左浮动，右侧内容向右浮动，overflow:hidden; 两者都浮动。

如果您仍然发现问题，请将这两个内容都包含在 <div> 和 overflow:hidden; 中。