When setting a link in a paragraph to "display: inline-block", then selecting/highlighting the entire paragraph, a little block appears over the link?

http://jsfiddle.net/nicktheandroid/3LxRr/

When highlighting a paragraph containing a link that's set to "display:inline-block", there appears a little white block over the top of the link ( when it's selected/highlighted). press Ctrl+A to select everything on the page and you'll see what the problem is.

If I change the line-height down to开发者_Go百科 16px - it goes away, but the line-height for the paragraph and the link are the same. I need the link to be displayed as an inline-block because I have tool tips that pop up, and if the link gets split in half by a new line, the tool tip appears in the middle of the page, so inline-block is a must.

It only happens in webkit browsers (Chrome and Safari). It's something about how the browser engine renders text selection highlight and is not really a CSS issue. because when you apply background color your code will work same in every browser.

If you believe it's a bug you can report it to webkit.org