在IE7中隐藏CSS和CSS锚点

为了简单起见，我在文档中创建了我的样式以突出显示我的问题。我有一排4个链接，样式看起来像按钮。下一个链接（第3项）我隐藏使用CSS。在IE8 +，Chrome，Firefox中，它可以很好地工作，但在IE7中，取消和接受按钮（下一步按钮的位置）之间存在间隙。在IE7中隐藏CSS和CSS锚点

<!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除了它不一样的，我只是其中包括这一切显示什么，我到目前为止做的事情。

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

来源

2013-02-14 cw_dev

如果将链接浮起，会发生什么情况？ – Pete 2013-02-14 10:14:26

左浮动确实有效，我认为必须在它们之间添加一个保证金空间以将它们分开。但是，我将如何居中对齐“按钮栏”中的按钮？ – 2013-02-14 10:24:14

啊你不能使用浮动左边然后 – Pete 2013-02-14 10:29:16

难道你不知道这些空间究竟是从哪里来的吗？

这是您的内联元素<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）使用负边距 - 但这可能会导致旧版浏览器出现问题。

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

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

来源

2013-02-14 10:40:11 Christoph

完美，所有的一条线的方法似乎是简单的解决方案。非常感谢。 – 2013-02-14 10:52:54

一种解决方法是将float：left仅添加到.NextButton css类。这应该工作。

来源

2013-02-14 10:42:11

+1不适用于一般问题，但在这种特殊情况下它正在工作;） – Christoph 2013-02-14 10:47:23

在IE7中隐藏CSS和CSS锚点

回答

相关问题