Question

我有一个div，其中包含一个带有边框的a。参见：

它在FF和IE中运行良好，但为什么右侧不能在Chrome中渲染？它是无效的CSS吗？（如果重要的话，在chrome OSX中测试）

Answer 1

测试用例：包含，因此在给定网址的内容发生变化后，此问题仍然有意义：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 
  "http://www.w3.org/TR/html4/strict.dtd">
<html><head><style type="text/css">
div {
  float: left;
  clear: left;
  margin: 3px;
}
span {
  border: 1px solid;
}
</style></head><body>

<!-- does not show right border -->
<div><span>With trailing space, no width </span></div> 

<!-- does show right border -->
<div><span>No trailing space, no width</span></div>
<div style="width: 40ex;"><span>With trailing space, has width </span></div>
<div style="width: 40ex;"><span>No trailing space, has width</span></div>

</body></html>

使用WebKit 532.6在Google Chrome 4.0.266.0（官方版本33992）中验证。

Answer 2

我不能告诉你为什么会发生这种情况，但我认为我有一个适合你的方法。你有空间填充你的链接内容，显然Chrome没有很好地处理这个。

如果删除<a>标记内容周围的额外间距，问题就会消失（我在Chrome检查器工具中执行了此操作）。所以，改变：

<a href="pclark-hacker-news-karma"> 4,481 </a>

为：

<a href="pclark-hacker-news-karma">4,481</a>

Chrome在处理浮动时必须以奇怪的方式处理空间（如果删除search_data类上的浮动属性，边框也会出现。）

右侧边框不显示在谷歌浏览器上

2 个答案: