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

常规讨论
-
链接里包含一个块元素,为啥在其上点击右键显示的菜单就不同了?
写点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
不知原因,是浏览器的什么特性影响的么?
还请高手赐教- 已编辑 librajt 2011年9月15日 7:26 详细描述
- 已更改类型 LeoTangModerator 2011年10月10日 10:21
全部回复
-
你好,
这个是因为文字最近的焦点是标签<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. -
你好,
我的理解是块级无素覆盖了锚记的部份属性,但是锚记特有的、块级无素不具备的属性被继承/保留下来。
在这里,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. -
在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表示<em>文本</em>,bt表示<b>文本</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>