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

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>之间的空格将被删除。