內聯元素和標記空白空間渲染問題

早在今天，我們必須處理瀏覽器在元素之間添加空白區域，如果在源標記中我們也有空白區域。內聯元素和標記空白空間渲染問題

我認爲這個問題幾乎消失了，但我今天在問題仍然存在的情況下咆哮。奇怪的是，問題不侷限於特定的瀏覽器。它在Firefox，Safari，Chrome和Opera中顯示出相同的問題方式，並且在IE中僅略有不同。

樣品CSS：

<style type="text/css"> 
li { 
    display: inline; 
    background: pink; 
    margin: 0px; 
    padding: 10px 0px; 
} 

li a { 
    background: green; 
    margin: 0px; 
    padding: 0px; 
} 

</style>

樣品標記：

<ul> 
<li> 
    <a href="#">hello</a> 
</li> 
<li> 
    <a href="#">world</a> 
</li> 
</ul> 

<ul> 
<li><a href="#">hello</a></li> 
<li><a href="#">world</a></li> 
</ul> 

<ul> 
<li><a href="#">hello</a></li><li><a href="#">world</a></li> 
</ul>

只有最後UL出現，我想它出現的方式......與跨越的整個寬度的一個標籤容器LI標籤。

鑑於跨瀏覽器的一致性，這可能實際上是渲染，因爲它應該？沒有回到舊的評論黑客（開始評論一個行的末尾，並擴大到下一個開始）任何人都知道這個解決方法或爲什麼這是做它做的？

理想情況下，我會浮動我的LI的，但由於其他問題保持內聯將是首選。

來源

2010-01-14 DA.

是的，當涉及內聯元素時，空格是空格。這幾乎總是你想要的。舉個例子來說，以下幾點：

<p>I <em>really</em> <strong>really</strong> want that whitespace.</p>

回敬相當困難如果最終呈現爲：

我真的* *** **真正想要的空白。

如果所有的瀏覽器都以某種方式渲染它，那很可能它們是對的，而你錯了。如果除IE以外的所有瀏覽器都以某種方式呈現，那麼情況會翻番......

來源

2010-01-15 00:13:01

這個例子使問題如此明顯，我必須拍我的額頭，並說出'doh！所以，是的，顯然這是按照預期設計的，並且在這種情況下非常合理。謝謝！ – 2010-01-15 19:24:54

我同意這個_except_在回車的情況下 - 爲什麼要把\ n作爲一個「」？那麼如何實現精細控制的CSS空白選項？ – MachineElf 2011-04-01 15:30:08

另外，它從標籤內部，雙重空間等內部剝去空白 - 根據您的理由，這也應該留下。 – MachineElf 2011-04-01 15:34:05

我相信這是設計。
您的源代碼中包含了空白區域（即使它是回車符），因此瀏覽器正在忠實地渲染它。我懷疑除了確保元素之間沒有空白之外，還有其他解決方法。

來源

2010-01-14 23:14:48 AUSteve

您可以將容器的font-size設置爲0，例如將其放入div，然後設置propper字體大小在LI項目

來源

2014-02-11 00:18:24 dnetix

內聯元素和標記空白空間渲染問題

回答

相關問題