IE9中，a标签内的span元素无法触发右键链接菜单

Question

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

似乎我遇到了一个有趣的IE bug（特性），涉及当一个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/

- csilk

---

你是否试图更改IE右键上下文菜单？ - Ibu

这是一个有趣的问题。我找到了原因：因为该span元素被浮动了。如果你取消浮动，它就能正常工作。但是，如果你想让它浮动，我仍然没有找到解决方案。 - kennypu

@Lbu 不，只是让IE右键菜单显示正确。 - csilk

@kennypu - 请查看Gmail，锚点（标题）内的跨度似乎没有浮动，仍然无法工作。 - csilk

@Cub3：太棒了！当预期行为被干扰时（通常是通过preventDefault等方式），这是我最讨厌的事情之一，但是当从锚点的块级后代触发用户启动的上下文菜单时忽略它真的很令人沮丧。另外：我从未意识到微软的错误提交有多糟糕（除非我在找错地方）。 - Oleg

您正在寻找向微软提交IE错误的正确位置。然而，我无法在Windows 7或Windows 8上的IE10中重现此问题，因此您可能不会在那里得到帮助。 - Don Cruickshank

Answer 1

您的锚元素的 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文档，并选择对其余布局造成最少麻烦的方法。

- Jani Hyytiäinen

Answer 2

好的，回答自己的问题，应该花更多时间研究它。

看起来如果你在标签上除了display: inline;之外有任何其他属性，它都不会起作用。

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

感谢大家的尝试，希望这能在未来帮助到某些人

- csilk

---

没有 display:relative 这样的东西，IE 会简单地忽略它，并且元素的默认显示方式 display:inline 会保留。 - Oleg

抱歉，我脑子有点短路了，今天过得太累了。我想说的是"display: inline;"。 - csilk

Answer 3

你可以始终使用display:inline-block;来保险起见。

此外，如果您在包装元素（如a标签）内部有浮动元素，则需要清除它们。

因此，一个快速而简单的方法是：

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

希望这可以帮助到您。

- Eddie

---

抱歉，这也不是与“浮点数”有关的问题，因为即使没有任何浮点数，在IE中它也会失败。 - veritas

Answer 4

不确定为什么它的表现不对，但是使用段落标签怎么样？

- daniel

---

真的吗？我在IE9中得到了2个不同的上下文菜单- http://jsfiddle.net/vdfhz/5/ - 那不就是问题所在吗？ - daniel

你在<span>上得到了链接上下文菜单，而不是在<p>上。是的，这就是问题所在，刚刚更新了上面的问题，看起来如果在<span>上有display: block;，它将无法工作 - http://jsfiddle.net/vdfhz/4/。 - csilk

Answer 5

首先，我需要说一下，由于我现在没有IE浏览器，所以无法测试以下信息是否能帮到你。

但是，如果你在表现不正常的元素上添加zoom : 1，很多IE中的错误可能会得到解决。

另外，在IE中，有时候不正确的行为可能是因为一个块级元素被渲染为内联元素的内部元素。所以，如果<a>仍然是内联元素，而<span>被渲染为块级元素，这可能是你的问题所在。

- t.niese