a标签在Chrome中异常表现及解决方法.pdfVIP

图10-2异常表现图2（PC中的chrome）

图10-3异常表现图3（安卓中的chrome）图10-4异常表现

图4（安卓中的chrome）

图10‑2异常表现图2(PC中的chrome)

图10‑3异常表现图3（安卓中的chrome）图10‑4异常表现

图4（安卓中的chrome）

环境：web环境的各种浏览器，包括windowsPC、安卓、苹果上的各种浏览器或

webview，在使用Html5开发Hybrid移动应用时，想用html来模拟中的块控件点击效

果，希望把一整块文档作为整体点击。在首次实现时采用了a嵌套块文档内容的方法

来实现，在绝大部分浏览器中表现正常，唯有chrome表现异常。

表现：除windowsPC端chrome(版本号41.0）和安卓5.1系统上的chrome（版本号45.0）

之外的浏览器（包括firefox、IE、opera、safari、浏览器、360浏览器、QQ浏览器）和

安卓4.X系统上的各种浏览器（webview）以及苹果上的各种浏览器（webview），

均能正常显示a，并且点击a可以跳转至目标url。而在chrome中，点击a标

签，出现的是编辑界面，通过这个编辑界面甚至可以直接删除掉htmlDOM节点，直接改变

页面文档结构。

显然这是一个bug。

：初步分析为a在chrome中渲染异常导致，本来怀疑a不能嵌套ul

，因为在IDE中会提示invalidtag，但是经实际测试，使用a嵌套ul在不

包含样式文件的情况下，在各个浏览器中均表现正常，点击可以跳转，并不会出现如图

那样调起编辑模式，而包含了样式文件，并且代码如下的情况下，会出现异常。最终确

认为css文件中为a和input规定了在chrome中的focus样式为编辑文本导致的。

去掉css文件中的对应样式即可。

有异常的代码：

!DOCTYPEhtml

html

head

metahttp-equiv=content-typecontent=text/html;

charset=utf-8

metaname=viewportcontent=width=device-width,

initial-scale=1.0,um-scale=1.0,user-scalable=0

metaname=format-detectioncontent=telephone=no/

title待发货订单/title

linkhref=ROOT/Public/css/order.cssrel=styheet

type=text/css

/head

bodystyle=background:#f5f5f5

divclass=wrappb30