gpt4 book ai didi

css - 在 IE7 中使用 css 隐藏 anchor 和跨度

转载 作者:太空宇宙 更新时间:2023-11-04 04:43:58 25 4
gpt4 key购买 nike

为简单起见,我在文档中创建了我的样式以突出显示我的问题。我有一排 4 个链接,它们的样式看起来像按钮。我使用 css 隐藏的下一个链接(第 3 个元素)。在 IE8+、Chrome、Firefox 中,它运行完美,但在 IE7 中,取消和接受按钮(下一步按钮所在的位置)之间存在间隙。

<!DOCTYPE html>
<html>
<head>
<title>Test Page</title>
<style type="text/css">
.ButtonBar
{
margin-top: 20px;
text-align: center;
}
.LinkButton
{
background-color: #01699b;
border: 0px solid;
border-radius: 14px;
color: #fff;
cursor: pointer;
font-weight: bold;
height: 28px;
padding: 0px 11px 0px 11px;
overflow: hidden;
position: relative;
text-decoration: none;
display: inline-block;
line-height: 28px;
}
.NextButton
{
display: none;
}
</style>
</head>
<body>
<div class="ButtonBar">
<a class="PreviousButton"><span class="LinkButton">Previous</span></a>
<a class="CancelButton"><span class="LinkButton">Cancel</span></a>
<a class="NextButton"><span class="LinkButton">Next</span></a>
<a class="AcceptButton"><span class="LinkButton">Accept</span></a>
</div>
</body>
</html>

如果您从 .LinkBut​​ton 类中删除除 background-color 之外的所有 CSS,它会执行相同的操作,我只是将其全部包含在内以展示我到目前为止所做的事情。

我应该怎么做才能解决这个问题?

最佳答案

你有没有想过这些空间实际上是从哪里来的?

这是内联元素之间的换行符 <a>造成差距。

    <div class="ButtonBar">
<a class="PreviousButton">...</a> <!-- Linebreak! -->
<a class="CancelButton">...</a> <!-- Linebreak! -->
<a class="NextButton">...</a> <!-- Linebreak! -->
<a class="AcceptButton">...</a> <!-- Linebreak! -->
</div>

现在现代浏览器会折叠其中的多个,但 IE7 不会,因此您的元素之间实际上有 2 个换行符,导致间隙加倍。

对此您有多种解决方案:

1) float 元素

2) 修改标记:

     <!-- end tag on the new line -->
<a>...
</a><a>...
</a>...

<!-- comments in between -->
<a>...</a><!--
--><a>...</a>

<!-- all on one line -->
<a>...</a><a>...</a>

<!-- In some cases (e.g. list elements) you can skip the end tag -->

3) 修改字体大小

4) 使用负边距 - 但这可能会导致旧浏览器出现问题。

您想采取什么解决方案取决于您。

对于您的特殊情况,您只需隐藏有问题的元素,您可以声明绝对 position或任何 float在该元素上。

关于css - 在 IE7 中使用 css 隐藏 anchor 和跨度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14872220/

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