none
链接里包含一个块元素,为啥在其上点击右键显示的菜单就不同了? RRS feed

  • 常规讨论

  • 链接里包含一个块元素,为啥在其上点击右键显示的菜单就不同了?

     

    写点html代码:

    <a href="/">文字</a>


    在文字上点右键,它的菜单是这样
    http://img2.zol.com.cn/product/27/38/ceO7aNNeC6OsU.jpg




    -------------------------------------------------------------
    <a href="/"><b style="display:block;">第一个例子</b></a>

    <a href="/"><b style="display:inline-block;">第二个例子</b></a>

    在文字上点右键,它们的菜单却是这样
    http://img2.zol.com.cn/product/27/37/cej6qTzOvNRe2.jpg





    不知原因,是浏览器的什么特性影响的么?
    还请高手赐教

    2011年9月14日 6:39

全部回复

  • 你好,

    这个是因为文字最近的焦点是标签<b/>而不是<a/>,你可以通过设置css样式的方式来代替内嵌<b/>


    Leo Tang [MSFT]
    MSDN Community Support | Feedback to us
    Get or Request Code Sample from Microsoft
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.
    2011年9月20日 11:19
    版主
  • 多谢回复。

    使用一个额外的<b/>标签,就是为了在css上进行更多的控制。经过测试,只要<a/>中包含块级元素,在其区域内点右键均不是期望的菜单。

    个人的感觉是,块级元素覆盖了锚记。但为什么锚记的属性又能表现出来呢,比如鼠标的手形、点击进行跳转。

    在IE9下表现似乎是与IE8一致的。这个应该是浏览器本身的特性吗?

    2011年9月23日 1:09
  • 你好,

    我的理解是块级无素覆盖了锚记的部份属性,但是锚记特有的、块级无素不具备的属性被继承/保留下来。

    在这里,IE9和IE8遵循了统一的标准对html标签进行解析,不同浏览器的解析方式可能不一样,可以算是浏览器本身的特性了。


    Leo Tang [MSFT]
    MSDN Community Support | Feedback to us
    Get or Request Code Sample from Microsoft
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.
    2011年9月23日 1:41
    版主
  • 我在 IE9 里面测试的结果是,无论内嵌元素 display 是 block 还是 inline ,右键菜单都是第一种,就是能够选择以各种方式打开链接的。

    我不知道你的页面上是不是有别的 CSS 样式附加在 a 元素上,使得在你那个 block 里面里面其实 a 的面积是没有 b 的那么大的,因此你点击 b 时点击到 a 外面的区域了,这时候右键菜单就没有跟连接相关的操作了。


    Microsoft ASP.NET MVP
    2011年9月24日 8:58
  • 在IE8的标准模式下,确实是我在1#所表述的那样的,你确认一下,开始我也没太注意这点。IE9与IE8应该是一样的。

    IE7倒是不管内嵌元素 display 是 block 还是 inline ,右键菜单都是第一种。这在IE8的兼容模式下也是一样的。只有display 是 inline-block 时才没有“新窗口打开”的菜单。

     

    页面上没有为a附加其它样式,我是单独写了一个页面做的测试。

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>test</title>
    <style>
    table{border-collapse:collapse;}
    td{text-align:center;border:1px solid #ccc;padding:5px;}
    a{text-align:left;background:#0bb;padding:10px;display:block;}
    a em{background:#999;padding:5px;border:1px solid #b00;}
    a b{background:#ccc;padding:5px;margin:5px;border:1px solid #b00;}
    </style>
    
    问题:IE8下,链接右键菜单有时显示“在新窗口打开”项,有时没有或为灰<br>
    <br>
    下表中,元素关系为:
    a的区域为青绿色,t表示文本,et表示&lt;em>文本&lt;/em>,bt表示&lt;b>文本&lt;/b>
    <hr>
    <table>
    	<tr>
    		<td>----序号----</td>
    		<td>----元素a的href值----</td>
    		<td>----元素a标记中的元素b----</td>
    		<td>----效果预览----</td>
    		<td>----a有菜单----</td>
    		<td>----b有菜单----</td>
    	</tr>
    	<tr>
    		<td>1</td>
    		<td>为链接</td>
    		<td></td>
    		<td><a href="/" onclick="">t</a></td>
    		<td></td>
    		<td>-</td>
    	</tr>
    	<tr>
    		<td>2</td>
    		<td>为链接</td>
    		<td>有,默认inline</td>
    		<td><a href="/" onclick="">t<em>et</em><b>bt</b><em>et</em>t</a></td>
    		<td></td>
    		<td></td>
    	</tr>
    	<tr>
    		<td>3</td>
    		<td>为链接</td>
    		<td>有,inline-block</td>
    		<td><a href="/" onclick="">t<em>et</em><b style="display:inline-block;">bt</b><em>et</em>t</a></td>
    		<td></td>
    		<td></td>
    	</tr>
    	<tr>
    		<td>4</td>
    		<td>为链接</td>
    		<td>有,block</td>
    		<td><a href="/" onclick="">t<em>et</em><b style="display:block;">bt</b><em>et</em>t</a></td>
    		<td></td>
    		<td></td>
    	</tr>
    	<tr>
    		<td>5</td>
    		<td>为javascript:;</td>
    		<td></td>
    		<td><a href="javascript:;">t</a></td>
    		<td>有,灰</td>
    		<td>-</td>
    	</tr>
    	<tr>
    		<td>6</td>
    		<td>为javascript:;</td>
    		<td>有,默认inline</td>
    		<td><a href="javascript:;">t<em>et</em><b>bt</b><em>et</em>t</a></td>
    		<td>有,灰</td>
    		<td>有,灰</td>
    	</tr>
    	<tr>
    		<td>7</td>
    		<td>为javascript:;</td>
    		<td>有,inline-block</td>
    		<td><a href="javascript:;">t<em>et</em><b style="display:inline-block;">bt</b><em>et</em>t</a></td>
    		<td>有,灰</td>
    		<td></td>
    	</tr>
    	<tr>
    		<td>8</td>
    		<td>为javascript:;</td>
    		<td>有,block</td>
    		<td><a href="javascript:;">t<em>et</em><b style="display:block;">bt</b><em>et</em>t</a></td>
    		<td>有,灰</td>
    		<td></td>
    	</tr>
    </table>
    <hr>
    
    讨论:<br>
    <ul>
    	<li>a标记的href属性为javascript:时,菜单项均为灰</li>
    	<li>b为inline-block、block时,均不会出现菜单项</li>
    </ul>
    
    
    </body>
    </html>
    

     


    2011年10月12日 5:53
  • 请问有文档可以参考吗?
    2011年10月12日 5:54
  • <a>标签只要嵌套一个块级元素,在IE8,9下,就会导致右键时焦点不在<a>标签上。跟右键空白处是一样的效果

     

    据我所知,IE8,7会有这问题(IE7不存在),W3C 明确对 HTMl4.0 规定  行元素不能包含一个块级元素。(<a>标签的块级化在HTML5 草案里被提出),IE8,9 对<a>标签块级化显示兼容的不够好。就出了这个问题。

     

    建议楼主绕开,为什么一定要<a>标签里套个块元素呢?

     

     

    2011年10月18日 8:46