錯誤的填充只在Firefox中

我有這個令人討厭的問題，填充。我建立一個菜單，這裏是它的HTML代碼（我已經採取了所有其他選項卡，只留下一個更好的可讀性）：錯誤的填充只在Firefox中

<div id="menu"> 
    <a class="<?php echo $description; ?>" href="<?php echo $path; ?>">Opis</a> 
</div>

$描述可以取兩個值：

選擇
notSelected

而且$路徑就是正確相對尋址。

這裏是CSS代碼：

#menu { 
    font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif; 
    background-color: #1958b7; 
    padding: 0 0 20px 0; /*Here set the size for tabs.*/ 
    border-top: 10px #2175bc solid; /*Here we add border.*/ 
} 

#menu a { 
    color: #fff; /*White color. */ 
    text-decoration: none; /*No decoration.*/ 
    padding: 0px 9px 5px 9px; /*The padding for tab.*/  
} 
.selected { 
    border-left: 8px solid #5ba3e0; /*Defining color and width for left border.*/ 
    border-right: 8px solid #5ba3e0; /*Defining color and width for right border.*/ 
    background-color: #2586d7; 
} 
.notSelected { 
    border-left: 8px solid #1958b7; 
    border-right: 8px solid #1958b7; 
    background-color: #2175bc; 
}

現在的問題是從#menu填充：

padding: 0px 9px 5px 9px; /*The padding for tab.*/

在Opera，Chrome瀏覽器，IE7，IE8和IE9它工作正常，結果是這樣的：

The right result.

，但在Firefox 4.0.1（和I R請記得這也與FF 3.6有問題）它顯示是這樣的：

The wrong result.

正如你所看到的，FF把1px的上述標籤OPIS沒有理由，即使我已經明確定義，不要把任何頂部填充。所以，現在在選項卡頂部可以看到1px的強藍色。

來源

2011-05-12 Jernej Jerin

解決方案：不要使用Firefox。：P – uSeRnAmEhAhAhAhAhA 2014-03-09 00:23:23

雖然它對於我在FF3.6.17中最高達FF5.0的works fine，這可能發生在標籤之間的空白處。

解決方法（以下任何一個），應該幫助

刪除空格
<div id="menu"><a class="<?php echo $description; ?>" href="<?php echo $path; ?>">Opis</a><div>
設置#menu{font-size:0px;line-height:0;}和這些屬性重置爲你想要的鏈接#menu a{font-size:12px;line-height:12px;}
浮動#menu中的鏈接與#menu a{float:left;}

來源

2011-05-12 09:03:26

爲了讓您知道，使用Firefox 4.0.1/Windows 7測試您的演示，如果我調整「結果」iframe的大小，這個差距就會出現在我的答案的截圖中。 – thirtydot 2011-05-12 09:12:33

你發佈的鏈接，我看了一下，我有這個差距，就像我的例子。也許你忽略了它，因爲它只有1px的高度。嘗試了你的建議，1.解決方案我在這裏發佈之前已經考慮過了，也試過了，不起作用，所以空白不是問題。 2.解決方案，設置font-size：17px和line-height：19px。現在關於這個解決方案的問題是，現在在IE7，IE8，IE9中，標籤現在超過1px，所以沒有更多的差距，但現在更高。繼續在下一篇文章： – 2011-05-12 12:41:10

所以這個解決方案確實修復FF，但現在打破IE瀏覽器。 3.解決方案是我正在尋找的，它可以在所有瀏覽器中工作，添加float之後：left我只需要將#menu中的填充增加到padding：0 0 30px 0，因爲由於某種原因它縮短了它。感謝幫助。 – 2011-05-12 12:41:23

它有時（間隙只出現在我調整的jsfiddle IFRAME [??]）看起來像這樣在我的Firefox 4：

http://jsfiddle.net/tvHgX/

所以，有一個間隙，但它看起來並不像像你的截圖。

我通過將float: left添加到#menu a來修復了間隙從未出現過。我也取代您的線路：

padding: 0 0 20px 0; /*Here set the size for tabs.*/

與overflow: hidden，以清除浮動，所以你不必手動指定padding。如果你喜歡，你可以恢復這個修復。

完整代碼：http://jsfiddle.net/tvHgX/1/

display: inline-block也將代替float: left工作，如果你不想使用花車出於某種原因。

來源

2011-05-12 09:09:51 thirtydot

謝謝，是的，我使用然後浮動：從第一answear離開，就像你提出的。關於填充，我需要定製高度定製，因爲我想要藍色底部。看看我的意思：http://www.vp-zalec.net/podatki/ – 2011-05-12 12:47:04

錯誤的填充只在Firefox中

回答

相關問題