Right border not displaying on google chrome
I have a div which contains an a with some border. See:
http://webnumbr.com/all
It works great in FF and IE, but why doesn't the right hand side 开发者_如何转开发render in Chrome? Is it invalid CSS? (testing in chrome OSX if that matters)
Test case: Included so this question still makes sense after the content at the given URL changes:
<!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.
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.
If you remove the extra spacing around the contents of the <a> tags, the problem disappears (I did this in the Chrome inspector tool). 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).
加载中,请稍侯......
精彩评论