不同瀏覽器中的間距不一致

Question

我需要創建一個簡單的日歷設計。 問題是，我無法更改從PHP腳本創建的HTML標記。 日歷創建為無序列表，其中每個li -tag代表一天。

從左到右，這些是Google Chrome ， Mozilla Firefox和Internet Explorer ：

我希望他們每個人看起來像Chrome示例（之后我將刪除不必要的邊框）。 我已經嘗試了很多東西來解決這個問題，例如負面的利潤 - 這當然改變了Chrome的外觀。 根據這篇文章，它是由li -tags之間的空格，制表符和換行符引起的，這只是事實的一半。

我想通了，創建腳本返回列表，中間沒有任何空格。 然而，這只適用於日子，而不是標題 - 不要問為什么，我也不知道......請參閱下面的代碼作為示例。

<li class="day first">Mo</li>
<li class="day">Tu</li>
<li class="day">We</li>
<li class="day">Th</li>
<li class="day">Fr</li>
<li class="day">Sa</li>
<li class="day">Su</li><li class="first outofrange">&nbsp;</li><li class="outofrange">&nbsp;</li><li class="outofrange">&nbsp;</li><li class="outofrange">&nbsp;</li><li class="outofrange">&nbsp;</li><li class="outofrange">&nbsp;</li><li class="past">1</li><li class="first past">2</li><li class="past">3</li><li class="past">4</li><li class="past">5</li><li class="past">6</li><li class="past">7</li><li class="past">8</li><li class="first past">9</li><li class="past">10</li><li class="past">11</li><li class="past">12</li><li class="past">13</li><li class="past">14</li><li class="past">15</li><li class="first past">16</li><li class="past">17</li><li class="past">18</li><li class="past">19</li><li class="past">20</li><li class="past">21</li><li class="past">22</li><li class="first past">23</li><li class="past">24</li><li class="past">25</li><li class="today">26</li><li class="future">27</li><li class="future">28</li><li class="future">29</li><li class="first">30</li><li class="outofrange">&nbsp;</li><li class="outofrange">&nbsp;</li><li class="outofrange">&nbsp;</li><li class="outofrange">&nbsp;</li><li class="outofrange">&nbsp;</li><li class="outofrange">&nbsp;</li></ul></div></div>

---

這是第二個Firefox示例，沒有天之間的空間。 正如您所看到的，它解決了問題，但由於標題之間仍有空間，因此並不完美。 它不適用於Internet Explorer，但無論我是否有空格，它仍然具有每個元素之間的偏移量。

這是我的代碼的JSFiddle-Exampe 。 請記住，我無法更改HTML標記！

我希望你能幫助我讓它們看起來一致。

Answer 1

如果你根本不能改變html，一個解決方案是使用浮點數而不是內聯塊元素，這樣所有元素之間的邊距不依賴於html標記中的字體大小或空格。

我在最新版本的IE，FF和chrome中測試了這個DEMO ，它們具有相同的渲染效果。

.calendario ul li {
    float:left;
    list-style-type:none;
    ...
}

要防止布局問題，您還需要清除浮動。 在演示中，我在<ul>元素上使用了一個偽選擇器：

.calendario ul:after{
    content:'';
    display:block;
    clear:both;
}

Answer 2

沒有必要求助於<table>除非你被扭曲回到時間，並以某種方式結束於90年代。

你在這里遇到的問題是由inline顯示元素引起的。 它是否是inline-block並不重要。 您可以將內聯顯示的元素與單詞進行比較，也可以將單詞之間的空格進行比較。

一個簡單的解決方案是將包含元素的font-size設置為0，然后在要顯示文本的元素中覆蓋它。 您已經為后面這些元素設置了字體大小，因此您只需添加即可解決此問題

font-size: 0px;

去calenderio類。

編輯：如果瀏覽器設置了最小字體大小（恕我直言是愚蠢的），你可以通過檢查另一個SO問題的接受答案來解決這個問題 。 這是一個有缺陷的瀏覽器實現的黑客攻擊，但是如果你遇到將font-size設置為0的問題，那么至少你可以修補瀏覽器的行為。

Answer 3

標題列表項目之間仍有空格。 刪除它們。

也就是說，您可以使用以下技巧維護源代碼合理布局的一些痕跡：

<li class="day first">Mo</li
><li class="day">Tu</li
><li class="day">We</li
> ...

請注意我是如何將空格放在結束標記內的？ 這是完全有效的（如果有點非正統）並允許您“在頁面上沒有空間” 和 “具有可讀HTML”同時！

編輯：如果JavaScript是一個選項，試試這個：

function stripWhitespace(node)
{
    // note: only applies to first-level children, not descendants
    var n = node.childNodes, l = n.length, i;
    for( i = l-1; i >= 0; i--)
    { // work in reverse because `childNodes` is live
        if( n[i].nodeType == 3 && n[i].nodeValue.replace(/\s/g,'') == "")
        {
            node.removeChild(n[i]);
        }
    }
}

調用該函數並將其傳遞給您的<ul>元素。 <li>之間的空格將被刪除。