html - 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 属性的中心 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;
}

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