IE9 a > span won't trigger right click link menu

Question

Ok, this is going to be an interesting one...

Pretty much I seem to have run into an interesting IE bug (feature) involving when a span is inside an anchor eg.

<a href='#'>
    <span style="float:left;">Super cool link</span>
    <span style="float:right;">10</span>
</a>

In IE, you seem to be able to left click through but you cannot right click on the item and get the link menu, this problem seems to be persistent across Google's services too, eg.

I'm wondering if anyone could shed some light on

1. The cause of why this is happening
2. A solution to this or a workaround

So far I have tried adding a   in the anchor and fiddled with z-indexes to no avail.

The only solution / workaround I can find is if you remove the Doctype the issue seems to go away. (not going to happen)

Ninja edit - You can't seem to CTRL + Click either

Ok another edit:

Looks like display: block; on the span kills it - http://jsfiddle.net/vdfhz/4/

Answer 1

Ok, answering my own question, should have just spend more time on it.

Looks like if you have anything other than display: inline; on the span it won't work.

http://jsfiddle.net/vdfhz/9/

Thanks for giving it a go everyone, hope this will help someone in the future

Answer 2

Your anchor element's hasLayout (IE property) is false.

This issue arises when you have only elements that hasLayout=true within an anchor that hasLayout=false.

a *{float:left;}

Demo (run in IE): http://jsfiddle.net/52A6L/ (notice the border around the link, that's your clickable area)

About hasLayout: http://msdn.microsoft.com/en-us/library/ie/ms530764(v=vs.85).aspx

You can fix this situation by having layout for the anchor OR not having layout for the spans. Not having layout for the span: http://jsfiddle.net/52A6L/1/ Having layout for the anchor: http://jsfiddle.net/52A6L/2/

The examples are simply examples. Please refer to the documentation on MSDN and pick the approach that causes least headaches for the rest of the layout.

Answer 3

Not sure why it behaves off, but how about using a paragraph tag instead?

Answer 4

you could always use display:inline-block; just to be on the safe side.

Also if you have floated elements inside a wrapper element (like an a tag) it needs to be cleared out.

So a quick and dirty way to do it would be:

<a href='#'>
    <span style="float:left;">Super cool link</span>
    <span style="float:right;">10</span>
    <div style="clear:both;"></div>
</a>

Hopefully that helps.

Answer 5

First i need to say that i can't test if the following informations will help you because i don't have IE here right now.

But many bugs in IE can be solved if you add zoom : 1 to the element that does behave the wrong way.

Another thing that can sometimes be responsible for incorrect behavior in IE is, when an element is rendered as block element inside of an inline element. So if <a> is still inline and <span> is rendered as block element, this could be the reason for your problem.