gpt4 book ai didi

css - IE7 和样式化标签覆盖

转载 作者:行者123 更新时间:2023-11-28 12:24:59 25 4
gpt4 key购买 nike

我从事一个元素,需要与 IE7+ 兼容。我们有一些样式非常好,但在 IE7 中有一些小问题,最后一个错误是关于标签的。宽度被强制为 150px,如果标签更大,它会在下一行继续。但是,在 IE7 中,它会覆盖下一个 bloc。这是一张图片:

Bug on IE7

我想要的(这是在 IE8+ 和真正的导航器上的结果):

wanted result


我提取了有问题的 css 并制作了一个 Bootstrap :

<!-- 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 的方法(演示中的那个)。但我想添加多少就添加多少。

编辑

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

最佳答案

在您的 OP 中并不清楚关于 CSS 可以做什么和不能做什么,但我会做类似的事情:

.form_text label { 
line-height: 0.8;
}

和/或

.form_text { 
height: 30px;
}

希望这对您有所帮助。

关于css - IE7 和样式化标签覆盖,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18611182/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com