Question

为简单起见，我在文档中创建了自己的风格以突出显示我的问题。我有一排4个链接，其样式看起来像按钮。我使用css隐藏的Next链接（第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>

如果从.LinkButton类中删除除了背景颜色之外的所有CSS，它会做同样的事情，我只是将它包括在内以显示我到目前为止所做的事情。

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

Answer 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没有，所以你的元素之间实际上有两个换行符，导致差距加倍。

你有几个解决方案：

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

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

对于您的特殊情况，只需隐藏相关元素，您就可以在该元素上声明绝对position或任何float。

Answer 2

一种解决方案是将float：left ONLY添加到.NextButton css类。这应该有用。

在IE7中用css隐藏锚点和跨度

2 个答案: