不同浏览器的间距不一致

Question

我需要创建一个简单的日历设计。问题是，我无法更改从 PHP 脚本创建的 HTML 标记。日历被创建为一个无序列表，其中每个 li-标签代表一天。

从左到右依次是 Google Chrome、Mozilla Firefox 和 Internet Explorer：

我希望它们中的每一个看起来都像 Chrome 示例（之后我将删除右侧不必要的边框）。我已经尝试了很多方法来解决这个问题，例如负边距 - 这当然改变了 Chrome 的外观。根据this article 的说法，这是由li-标签之间的空格、制表符和换行符引起的，这只是事实的一半。

我发现，创建脚本返回的列表之间没有任何空格。然而，这只适用于那些日子，而不是标题 - 不要问为什么，我也不知道......请参阅下面的代码以获取示例。

<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，一种解决方案是 使用浮动 而不是 inline-block 元素，以便所有元素之间的边距不依赖于字体大小或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。您可以将内联显示为单词的元素进行比较，并且与单词一样，它们之间有空格。

一个简单的解决方案是将包含元素的字体大小设置为 0，然后在要显示文本的元素中覆盖它。您已经为后面的这些元素设置了字体大小，因此您可以简单地通过添加来解决这个问题

font-size: 0px;

到calenderio 类。

编辑：如果浏览器设置了最小字体大小（恕我直言，这很愚蠢），您可以通过检查this other SO question 上接受的答案来解决这个问题。这是对浏览器的错误实现的一种破解，但是如果您在将 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>s 之间的空格将被删除。