0

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

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）的方法。但我可以随心所欲地添加。

编辑

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

4

2 回答 2

0

在您的 OP 中，您对 CSS 可以做什么和不可以做什么并不是很清楚，但我会做类似的事情：

.form_text label { 
    line-height: 0.8; 
}

和/或

.form_text { 
    height: 30px; 
}

希望这可以帮助。

于 2013-09-04T10:37:34.857 回答
0

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

首先，我重置了阻塞 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浮动正确问题

于 2013-09-06T13:00:38.157 回答