不同浏览器中的间距不一致

Question

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

从左到右，这些是 Google Chrome ， Mozilla Firefox 和 Internet Explorer ：

我希望他们每个人看起来像Chrome示例（之后我会删除不必要的边框）。我已经尝试了很多东西来解决这个问题，例如负面的利润 - 这当然改变了Chrome的外观。根据{{​​3}}，它是由 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不起作用，但无论我是否有空格，它仍然有每个元素之间的偏移。

这是我的代码this article。 请记住，我无法更改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: 0px; 都没关系。您可以比较以内联方式显示为单词的元素，也可以将它们与单词进行比较。

一个简单的解决方案是将包含元素的font-size设置为0，然后在要显示文本的元素中覆盖它。您已经为后面这些元素设置了字体大小，因此您只需添加

即可解决此问题

calenderio

到{{1}}班。

编辑：如果浏览器设置了最小字体大小（恕我直言是愚蠢的），您可以通过检查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
> ...

请注意我如何将空白放入结束标记中？这是完全有效的（如果有点非正统）并且允许你在页面上没有空间＆＃34; 和＆＃34;具有可读的HTML＆＃34;在同一时间！

编辑：如果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>之间的空格将被删除。