Webkit 空白问题
大家好，在 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 Is A Button</a> <a href="">Here Is A Button</a> <a href="">Here Is A Button</a> <!-- extra space here--> <a href="">Here Is A Button</a> <a href="">Here Is A Button</a> <a href="">Here Is A Button</a>
</div>
</body>
</html>
您会注意到第三个按钮在右侧被切片。这是当我在两个按钮之间有多个空格时（当减少到一个空格时，按钮不会被切片）。
有什么想法吗？
编辑：
我还在每个主要浏览器中进行了比较。它们在渲染上都有一些不同。
Hey guys, getting a error in webkit browsers (chrome/safari) where the padding is being cut off from anchor tags.
Here's an example:
<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 Is A Button</a> <a href="">Here Is A Button</a> <a href="">Here Is A Button</a> <!-- extra space here--> <a href="">Here Is A Button</a> <a href="">Here Is A Button</a> <a href="">Here Is A Button</a>
</div>
</body>
</html>
You'll notice the third button is getting sliced on the right hand side. This is when I have more than one space in between the two buttons (when reduced to one space, the button doesn't get sliced).
Any thoughts?
EDIT:
I've also done a comparison in each of the major browsers. They all have some different in rendering.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
您的锚标记是内联的。就像段落中的文本一样，内联文本不会折叠空白，而是尊重它。将锚点设置为
display:block;float:left;，空白区域就会消失。至于为什么 Webkit 决定以这种方式呈现它，我不确定，但它可能正在尝试一些通常适用于内联文本的东西（例如，如果这只是一个带有下划线链接的段落）。 （为什么 Opera 会做出这种奇怪的事情，这对我来说又是一个谜，但是，这与 Opera 的课程是一样的。）
Your anchor tags are inline. Just like text in a paragraph, inline text will not collapse white space, but respect it. Set your anchors to
display:block;float:left;, and the white space should disappear.As to why Webkit decides to render it that way, I'm not sure, but it may be attempting something that generally works with inline text (e.g., if this were just a paragraph with underlined links). (Why Opera does it's own weird thing is again a mystery to me but, well, par for the course for Opera.)
我想你一定是偶然发现了一个错误。请注意，如果增加锚元素的右内边距，它会突然再次变宽至 11 像素（
padding: 5px 11px 5px 7px）。如果仅调整该锚点的右侧填充（将其他锚点保留为 7 像素），您可以更清楚地看到它。它仍然会以 16 像素进行切片，但不会以 17 像素进行切片。
我也遇到过同样的问题，但从未找到解决方案。我想最后我只是漂浮了元素。
I think you must have stumbled upon a bug. Notice if you increase the right padding of the anchor elements, it suddenly snaps wide again at 11px (
padding: 5px 11px 5px 7px).You can see it even more clearly if you adjust the right padding of that one anchor only (leaving the others at 7px). It will still slice at 16px, but not at 17px.
I have had the same problem, but never found a solution. I think in the end I just floated the elements.
内联元素会自动在元素右侧添加 4px 的空白，因此我猜测当您添加额外的空间时，它会添加足够的空间以将最后一个元素发送出包含的父元素。这只是一个猜测，但我认为这就是发生的事情:)
Inline elements automatically add 4px of white space to the right of the element, so I'm guessing that when you add the extra space, it adds enough to send the last element out of the containing parent. It's just a guess, but I think that's what happens :)
我解决这个问题的方法是：
在 Chrome 29 中测试
The way that I fixed this is:
Tested in Chrome 29