我从事一个项目,需要符合 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)的方法。但我可以随心所欲地添加。
编辑
如果可能的话,我想要一个不会让我在太长的标签上添加类的解决方案。