1px之間的空間<a>標籤在Firefox中

我已經在父元素上使用了font-size: 0;，這就是我得到的鏈接沒有空格，但空間仍然存在於Firefox中。1px之間的空間<a>標籤在Firefox中

請在Firefox中測試這一點，然後任何其他瀏覽器，你會看到Firefox是顯示（儘管1px的）的鏈接之間的空間，因爲沒有其他的瀏覽器是這樣做的地方......以及IE6 & 7，但讓我們不要談論他們......

http://jsfiddle.net/uZMzA/

有誰知道爲什麼嗎？我怎麼能解決它，而不使用JavaScript來確定瀏覽器？

2012-04-30 jamcoupe

[鏈路之間未知空間（http://stackoverflow.com/questions/5147258/unknown-space-between-links） – j08691

爲什麼發生這種情況的原因是因爲有一個文本節點用在一個標籤之間的斷行。而且，由於您已設置letter-spacing: 1px;，並且Firefox編碼器已選擇以它們的方式實現字母間距，所以在textnode之前或之前您會得到1px的字母間距。

的解決方案，因爲在其他地方已經暗示，就是要改變div#navigation規則不具有行letter-spacing: 1px在裏面，像這樣：

div#navigation { 
    position: relative; 
    padding: 1px 0; 
    border-top: 1px solid black; 
    border-bottom: 1px solid black; 
    font-family: Georgia, Serif; 
    margin: 0 auto 2px auto; 
    width: 400px; 
    font-size: 0; 
    text-shadow: 0 1px #fff; 
}

你可以看到一個工作版本與此修補程序應用：http://jsfiddle.net/uZMzA/10/

來源

2012-04-30 16:32:28

也許你的意思是：

letter-spacing: 0

這會導致你的「錯誤」

編輯：

如果你想在1px的字間距，這是一個很好的解決方案，fiddle up

只需添加：

display: inline-block到Div容器CSS和float: left到a元素。

來源

2012-04-30 16:10:54

的可能重複編輯表示另一種解決方案。 –

只需從您的代碼中刪除空白區域，如下所示jsFiddle example。

HTML：

<div id="navigation"> 
    <a href="#">Link1</a><a href="#">Link2</a><a href="#">Link3</a><a href="#">Link4</a> 
</div>

來源

2012-04-30 16:12:22 j08691

爲什麼downvote？我不知道爲什麼愚蠢到在這裏downvote多個答案，但這是正確的解決方案。 – j08691

-1因爲它不是一個真正的解決方案。你讓佈局由源代碼決定，你永遠不應該這樣做。正確的解決方法是刪除導致問題的規則'letter-spacing：1px'。 –

這絕對是因爲OP的問題的解決方案是空白，要麼評論或刪除將修復造成的。 – j08691

這是愚蠢的，我真的不能解釋「爲什麼」的發生，但這裏有兩個方法來糾正顯示。

FF不喜歡代碼中的空格。要麼刪除回車你<a>標籤之間，或者加以註釋，像這樣：

<div id="navigation"> 
    <a href="#">Link1</a><!-- 
    --><a href="#">Link2</a><!-- 
    --><a href="#">Link3</a><!-- 
    --><a href="#">Link4</a> 
</div>

來源

2012-04-30 16:17:40 redlena

閱讀此篇文章。你會在其正文和評論中找到所有可用的技術，以及他們的權衡。

http://css-tricks.com/fighting-the-space-between-inline-block-elements/

的「空格去掉」選項被第一次提到，因爲它是最容易實現的。但它也「有點時髦」。

註釋中列出了「基於字母間距的」選項，但請注意，如果您想讓IE快樂，則必須包含額外的CSS。

來源

2012-04-30 16:49:34 kikito

我知道我前幾天就讀過這些東西。良好的聯繫。 – j08691

1px之間的空間<a>標籤在Firefox中

回答

相關問題