Question

我有以下代码使用cakephp的助手

生成一些跨度

<div id="numberRow">
    <?php echo $this->Paginator->numbers(array('class' => 'numbers', 'separator' => '', 'before' => '', 'after' => '', 'first' => 1, 'last' => 1)); ?>
</div>

这将生成以下代码：

<div id="numberRow">
    <span class="current">1</span><span><a href="/posts/show/barter/page:2" class="numbers">2</a></span>
</div>

问题是浏览器在我不想要的<span>之后渲染一个空格。

到目前为止，我的解决方案是按如下方式编写蛋糕：

<div id="numberRow">
            <span class="current">1</span><span><a href="/posts/show/barter/page:2" class="numbers">2</a></span></div>

将结束标记放在与<span>相同的行上，但会破坏格式并使源更难以阅读。

有更好的方法吗？

Answer 1

好消息！有一种CSS风格旨在解决这个确切的问题。它被称为white-space-collapse，它在样式表中看起来像这样：

#numberRow {white-space-collapse: discard;}

在支持它的浏览器中，如果周围没有任何其他字符，这将导致<div>内的标记之间的空格被删除。

现在有了坏消息......目前还没有一款支持它的浏览器。：（

速度越来越快的浏览器可能会很快支持它 - 我愿意打赌它至少会在今年年底在Chrome中使用 - 但这并不足以让它值得支持使用了一段时间。

与此同时，这是一个困扰很多网站设计师的常见问题。

最常见的解决方案是根据您在问题中提供的示例，从源代码中删除空格。它并不理想，但确实可以解决问题，而且没有任何混乱的黑客攻击。

如果您决定保持源代码整洁（或者由于您使用的框架或其他原因而无法避免它），那么还有一些更糟糕的解决方案：

首先是在页面加载时使用Javascript字符串替换来删除不需要的空格。这很麻烦，但确实有效，除非在用户禁用javascript的罕见情况下。您可能会遇到一些页面刷新问题，因为它首先加载一个布局，然后立即将其自身重新调整为正确的布局，但它可能是最小的（取决于浏览器速度和问题的规模）。

一个更加混乱的解决方案，但毫无疑问是一个聪明的黑客，是为父元素设置font-size:0;（在您的情况下，<div>），然后将font-size设置回内容元素的大小正确。例如：

#numberRow {font-size:0;}
#numberRow>span {font-size:12px;}

（用你想碰巧的大小取代'12px'，当然）

这样做的缺点是：首先，这是一个可怕的黑客攻击;其次，这是一个可怕的黑客;第三，如果你使用和基于em的大小布局而不是固定的像素大小的字体，它可以使你的字体大小难以控制。但它确实有效。

总而言之，我的建议是使用简单的答案，并删除PHP代码中的空格。至少在大多数人的浏览器中都有适当的CSS解决方案之前。

希望有所帮助。

Answer 2

你能这样做吗？

<div id="numberRow"><?php echo $this->Paginator->numbers(array('class' => 'numbers', 'separator' => '', 'before' => '', 'after' => '', 'first' => 1, 'last' => 1)); ?></div>

不要在网页中呈现html格式化空格

2 个答案: