简体   繁体   English

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

[英]Right border not displaying on google chrome

I have a div which contains an a with some border. 我有一个div包含了a与一些边界。 See: 看到:

http://webnumbr.com/all http://webnumbr.com/all

It works great in FF and IE, but why doesn't the right hand side render in Chrome? 它在FF和IE中运行良好,但为什么右侧不能在Chrome中渲染? Is it invalid CSS? 它是无效的CSS吗? (testing in chrome OSX if that matters) (如果重要的话,在chrome OSX中测试)

Test case: Included so this question still makes sense after the content at the given URL changes: 测试用例:包括在给定URL的内容更改后,此问题仍然有意义:

<!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>

Verified in Google Chrome 4.0.266.0 (Official Build 33992) with WebKit 532.6. 使用WebKit 532.6在Google Chrome 4.0.266.0(官方版本33992)中验证。

I can't tell you the reason why this is happening, but I think I have a fix for you. 我不能告诉你为什么会发生这种情况,但我认为我有一个适合你的方法。 You have spaces padding your link content, and apparently Chrome isn't handling this very well. 您有空间填充链接内容,显然Chrome不能很好地处理这个问题。

If you remove the extra spacing around the contents of the <a> tags, the problem disappears (I did this in the Chrome inspector tool). 如果删除<a>标记内容周围的额外间距,问题就会消失(我在Chrome检查器工具中执行了此操作)。 So, change: 所以,改变:

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

to: 至:

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

Chrome must handle the space in an odd manner when dealing with a float (if you remove the float property on the search_data class, the border appears as well). 处理float时,Chrome必须以奇怪的方式处理空间(如果删除search_data类上的float属性,则边框也会出现)。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM