Question

嘿伙计们，在webkit浏览器（chrome / safari）中出现错误，其中填充符被锚标记切断。

以下是一个例子：

    <html>
    <head>
        <style type="text/css">
        body 
        {   
            background-color: #F4F4E7;  
            margin: 0;  padding: 0;
            font-family: Arial, sans-serif;
        }   
        .restrictedSpace
        {
            margin: 40px;
            width: 300px;
            border: 1px solid #999;
            line-height: 28px;
            white-space: normal;
        }
        .restrictedSpace a
        {
            font-weight: normal;
            font-size: 11px;
            background-position: 7px 7px;
            padding: 5px 7px;
            background-color: #000;
            color: #fff;
            text-decoration: none;
        }
        </style>
    </head>
    <body>
    <div class="restrictedSpace">
        <a href="">Here&nbsp;Is&nbsp;A&nbsp;Button</a> <a href="">Here&nbsp;Is&nbsp;A&nbsp;Button</a> <a href="">Here&nbsp;Is&nbsp;A&nbsp;Button</a>  <!-- extra space here--> <a href="">Here&nbsp;Is&nbsp;A&nbsp;Button</a> <a href="">Here&nbsp;Is&nbsp;A&nbsp;Button</a> <a href="">Here&nbsp;Is&nbsp;A&nbsp;Button</a>
    </div>
    </body>
</html>

你会注意到第三个按钮正在右侧切片。这是当我在两个按钮之间有多个空格时（当缩小到一个空格时，按钮不会被切片）。

有什么想法吗？

编辑：

我也在每个主流浏览器中进行了比较。它们在渲染方面都有一些不同。

http://i.stack.imgur.com/WyNGK.jpg

Answer 1

您的锚标记是内嵌的。就像段落中的文本一样，内联文本不会折叠空格，而是尊重它。将锚点设置为display:block;float:left;，空格应该消失。

至于为什么Webkit决定以这种方式呈现它，我不确定，但它可能正在尝试通常与内联文本一起使用的东西（例如，如果这只是带有下划线链接的段落）。（为什么Opera这样做有点奇怪，对我来说又是一个谜，但是，对于Opera的课程来说也是如此。）

Answer 2

我认为你一定是偶然发现了一个错误。请注意，如果增加锚元素的右边距，它会突然以11px（padding: 5px 11px 5px 7px）快速捕捉。

如果你只调整那个锚点的正确填充（让其他锚点保持在7px），你可以更清楚地看到它。它仍然会以16px切片，但不会切成17px。

我遇到了同样的问题，但从未找到解决方案。我想最后我只是浮现了元素。

Answer 3

内联元素会自动将4px的空白空间添加到元素的右侧，所以我猜测当你添加额外的空间时，它会增加足够的空间来发送包含父元素的最后一个元素。这只是一个猜测，但我认为这是发生的事情:)）

Answer 4

我解决这个问题的方法是：

a {
    display:inline-block;
}

在Chrome 29中测试

Webkit白色空间问题

4 个答案: