Question

我在一个项目上工作，需要符合IE7 +。我们有一些样式工作得非常好，但IE7有小问题，最后一个错误是标签。宽度被强制为150px，如果标签较大，则在下一行继续。但是，在IE7中，它会覆盖下一个集团。这是一张图片：

Bug on IE7

我想要什么（这是IE8 +和真实导航员的结果）：

wanted result

我提取有问题的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;，但是如果我删除它，它也不起作用：

Without position absolute

要完成，我知道我也无法删除margin:.2em;，但边距太大了。

那么，有没有办法纠正这个问题？

如果可能的话，我想要一种不修改现有CSS（演示中的那个）的方法。但我可以随意添加。

修改

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

Answer 1

在你的OP中你不能清楚你能做什么，不能做什么关于CSS，但我会做类似的事情：

.form_text label { 
    line-height: 0.8; 
}

和/或

.form_text { 
    height: 30px; 
}

希望这有帮助。

Answer 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

IE7和样式标签覆盖

2 个答案: