IE9 a＆gt; span不会触发右键单击链接菜单

Question

好的，这将是一个有趣的...

我似乎遇到了一个有趣的IE漏洞（功能），涉及当一个span在一个锚点内时，例如。

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

在IE中，您似乎可以左键点击，但无法右键点击该项目并获取链接菜单，这个问题似乎也在Google的服务中持续存在，例如。

我想知道是否有人可以阐明

1. 发生这种情况的原因
2. 此解决方案或解决方法

到目前为止，我已经尝试在锚点中添加 并使用z-index填充无效。

我能找到的唯一解决方案/解决方法是，如果您删除Doctype，问题似乎就会消失。 （不会发生）

Ninja编辑 - 您似乎无法按CTRL +单击

好的另一个编辑：

看起来跨度上的display: block;会将其杀死 - http://jsfiddle.net/vdfhz/4/

Answer 1

好的，回答我自己的问题，应该花更多的时间在上面。

如果您在跨度上有display: inline;以外的任何内容，它将无效。

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

感谢大家放手一搏，希望这将有助于未来的人

Answer 2

您的锚元素的hasLayout（IE属性）为false。

如果在hasLayout = false的锚点中只有hasLayout = true的元素，则会出现此问题。

a *{float:left;}

演示（在IE中运行）：http://jsfiddle.net/52A6L/（注意链接周围的边框，这是您的可点击区域）

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

您可以通过为锚点布局或不具有跨度布局来解决此问题。 没有跨度的布局：http://jsfiddle.net/52A6L/1/ 拥有锚点的布局：http://jsfiddle.net/52A6L/2/

这些例子只是一些例子。请参阅MSDN上的文档，并选择导致其余布局最少麻烦的方法。

Answer 3

不确定它为什么会失效，但是如何使用段落标记呢？

Answer 4

你总是可以使用display：inline-block;只是为了安全起见。

此外，如果您在包装元素（如标记）中放置了元素，则需要清除它。

因此，快速而肮脏的方法是：

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

希望这会有所帮助。

Answer 5

首先，我需要说我无法测试以下信息是否会对您有所帮助，因为我现在没有IE。

但是，如果将zoom : 1添加到行为方式错误的元素，IE中的许多错误都可以解决。

有时可能导致IE中的错误行为的另一件事是，当元素在内联元素内呈现为块元素时。因此，如果<a>仍然是内联的并且<span>呈现为块元素，则可能是您遇到问题的原因。