3

Testing the CSS property outline-offset, I noticed that Chrome only seems to insert spacing to the left and top of the element (Firefox, Opera and Safari (Windows) all place spacing on all edges, while IE9 doesn't support the property). Does anyone have an idea why this is so?

jsFiddle: http://jsfiddle.net/hydrurga/WChhS/

The html at jsFiddle above is:

<p>First paragraph</p>
<p>Here is the <span class="first">first span</span> and the
<span class="second">second span</span> of the paragraph</p>
<p>Another paragraph</p>

with style:

p {background-color:blue; color:red; line-height: 3em}
span.first {outline: 5px solid red}
span.second {outline: 5px solid red; outline-offset: 5px}
  • Not sure why that's the case, but looks like it's contingent on `display: inline`, so setting `display: inline-block`, and the related variations, seems to avoid the issue: http://jsfiddle.net/WChhS/3/ – tiffon Dec 17 '12 at 21:01
  • Indeed it does. Looks like a bug as it should work with `display: inline` (the Spec stating that with outline-offset the outline is offset from the border edge). Thanks tiffon. –  Dec 20 '12 at 10:47

0 Answers0