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 属性上使用 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;同时使用两者。

如果您仍然看到问题，请将两个内容都包装在 a<div>和overflow:hidden;that 中。