Question

What I have
I have a normal HTML link, like <a href="#">Link</a>. In my stylsheet, I have set that link to display: inline-block; because I have to push it around a bit to match the layout.
The font-style is set to italic.

The problem
This leads to the following problem: Because the text is set in italics, the last letter of the linked word exceeds the box around the link. Because of that, Safari & Chrome “cut up” a color change on hover. See that screenshot where I assigned a background color to the link to make it more clear.

The normal link color is the light one, the blue one is the hover color.

Firefox manages this correctly without cutting anything up.

Setting a padding for the link would probably be the simplest solution, but I feels like a workaround for me. Is there any other solution?

Fiddle: http://jsfiddle.net/qD78e/

Answer 1

You could always add padding to the italic class, something like:

a{
    display: inline-block;
    font-style: italic;
    font-size: 100pt;
    background-color: red;
    color: white;
    padding: 0 10px;
}

would give you this: http://jsfiddle.net/8ZAUf/ – this seems to display the same in all the browsers I tested (opera, safari, chrome, firefox).

You could also take Kamo’s suggestion, although I’d modify it slightly and do this:

#prob:after{
  content: '\00a0';
  font-size: 18pt;
}

giving you: http://jsfiddle.net/AZS6S/, you can then re-use this (obviously by using a class, not an id).