Question

This doesn’t occur in Chrome. I am trying to implement an Ellipsis for the nested element. Has anyone else come across this and, if so, were you able to work around?

<span>bar <span class="foo">foo</span> bar</span>

span.foo {
    display: inline-block;
    overflow: hidden;        
}

Fiddle

<a href="http://www.stackoverflow.com">bar <span class="foo">foo</span> bar</a>

span.foo {
    display: inline-block;
    text-decoration: inherit;
    overflow: hidden;        
}

Fiddle

Answer 1

Add vertical-align: top where you have display: inline-block.