覆盖的 IE7 和样式标签答案

【问题标题】：IE7 and styled label which overrides覆盖的 IE7 和样式标签
【发布时间】：2013-09-06 21:00:38
【问题描述】：

我从事一个项目，需要兼容 IE7+。我们有一些样式非常好用，但在 IE7 上存在一些小问题，最后一个错误是针对标签的。宽度强制为 150 像素，如果标签更大，则在下一行继续。但是，在 IE7 中，它会覆盖下一个块。这是一张图片：

我想要的（这是 IE8+ 和真正的导航器上的结果）：

我提取了有问题的 css 并做了一个引导程序：

<!-- DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" -->
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=7" />
    <style type="text/css">
.form_text {
    position:relative;
    clear:both;
    margin:.2em;
    padding-left:150px;
}
.form_text label {
    position:relative;
    *position:absolute;
    float:left;
    width:140px;
    margin:.2em 0 0 -150px;
    text-align:right;
}
    </style>
</head>
<body>
    <p class="form_text">
        <label>My label too long to stay on one line</label><input type="text" />
    </p>
    <p class="form_text">
        <label>A normal label</label> <input type="text" />
    </p>
</body>
</html>

通过剪切CSS，我发现问题来自*position:absolute;，但如果我删除它，它也不起作用：

最后，我知道我也不能删除margin:.2em;，但是边距太大了。

那么，有什么办法可以解决这个问题吗？

如果可能，我想要一种无需修改现有 CSS（演示中的 CSS）的方法。但我可以随心所欲地添加。

编辑

如果可能，我想要一个不会让我在太长的标签上添加类的解决方案。

【问题讨论】：

标签： css internet-explorer-7

【解决方案1】：

在您的 OP 中并不清楚在 CSS 方面您能做什么和不能做什么，但我会做类似的事情：

.form_text label { 
    line-height: 0.8; 
}

和/或

.form_text { 
    height: 30px; 
}

希望这会有所帮助。

【讨论】：

它有效，但这并不是我想要的。我完成了我的问题（并添加了想要的结果）

【解决方案2】：

我找到了一个解决方案，虽然并不完美，但它给了我想要的结果。

首先，我重置了阻塞 CSS 属性：

.form_text label {
    *position:relative;
}

接下来，为了避免让 IE 移动我的第二个标签，我添加了一个空 div 以允许清除（感谢 JQuery）：

$('.form_text').after('<div style="clear:both;font-size:0;height:1px"/>');

我不太喜欢这个解决方案，因为它需要 JS，但是，:after 在 IE7 上不起作用，并且所有替换它的 css 修复使浏览器挂在我的页面上...

-- 基于这个问题的答案的想法：IE7 float right problems

【讨论】：