在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錨點

回答

相關問題