0

为简单起见，我在文档中创建了我的样式以突出我的问题。我有一排 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 类中删除除背景颜色之外的所有 CSS，它的作用相同，我只是将其全部包含在内以显示我到目前为止所做的事情。

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

4

2 回答 2

1

你有没有想过这些空间实际上来自哪里？

这是您的内联元素之间的换行符<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）浮动元素

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) 使用负边距——但这可能会导致旧浏览器出现问题。

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

对于您的特殊情况，您只需隐藏有问题的元素，您可以在该元素上声明 absoluteposition或 any float。

于 2013-02-14T10:40:11.713 回答
1

一种解决方案是将 float:left 仅添加到 .NextButton css 类。这应该有效。

于 2013-02-14T10:42:11.553 回答