我在基于 Sencha Touch 2 的移动应用程序中设计了一个类似于按钮的普通链接样式,但我遇到的问题是大多数链接在 iPhone 上的 Safari 中无法正常工作。
链接是普通的<a>
带有内部标签 <span>
包含标签文本的元素。 <a>
上有填充元素,它允许注册水龙头。看来内部 <span>
阻止点击在父 anchor 中注册为链接点击,并且其背景是透明的。
这是标记:
<a href="http://test-site.xx/full-site-page?param=value" class="x-button-normal x-button btn-profile">
<span class="x-button-label">View profile on full site</span>
</a>
在 Chrome 中对此进行测试不会出现任何问题,即单击跨度会导致跟随父超链接。两者都是基于 Webkit 的浏览器。我们的一位测试人员还在 Macbook 上的 Safari 中对此进行了测试,没有任何问题;我还使用 Wacom Bamboo 数位板在 Chrome 中对此进行了测试,没有任何问题。这只是移动设备上的一个问题(在 iPhone 和 Android 2.2 上测试过)——这正是我们的目标。
我可以在 <span>
上设置 CSS 属性吗?允许水龙头落入父超链接的元素?理想情况下,我想避免必须通过 JavaScript 设置事件。关于为什么这不像我预期的那样工作有什么想法吗?
更新:以下是 Chrome 开发者控制台报告的内部跨度的样式:
-webkit-box-align: center;
-webkit-box-flex: 1;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-user-drag: none;
-webkit-user-select: none;
background-attachment: scroll;
background-clip: border-box;
background-color: transparent;
background-image: none;
background-origin: padding-box;
border-bottom-color: white;
border-bottom-style: none;
border-bottom-width: 0px;
border-left-color: white;
border-left-style: none;
border-left-width: 0px;
border-right-color: white;
border-right-style: none;
border-right-width: 0px;
border-top-color: white;
border-top-style: none;
border-top-width: 0px;
box-shadow: none;
box-sizing: border-box;
color: white;
cursor: auto;
display: inline;
font-family: 'Helvetica Neue', HelveticaNeue, Helvetica-Neue, Helvetica, 'BBAlpha Sans', sans-serif;
font-size: 18px;
font-weight: bold;
height: auto;
line-height: 21px;
overflow-x: hidden;
overflow-y: hidden;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
position: static;
text-align: center;
text-decoration: none;
text-overflow: ellipsis;
white-space: nowrap;
width: auto;
非常感谢。
最佳答案
解决了,感谢this post其中提到了以下 CSS 属性:
pointer-events: none;
将此添加到内部样式 <span>
(和内部 float <img>
正如我在第二条评论中提到的那样)允许这些点击通过父超链接。
奇怪的是,Sencha Touch 2 似乎干扰了 DOM,不确定具体是什么。在完全静态的 HTML 页面(没有 JavaScript,更不用说 Sencha Touch 2)上模拟一个类似样式的按钮并没有在移动设备上出现原始问题。
简单情况下的另一个选择(单个 <span>
,没有 float 图像)是重构样式以消除对内部 <span>
的需要。 ,尽管这对于更复杂的情况是不可行的:
<a class="attachment" href="/someRepository/someDownload.pdf">
<img src="/images/fileExtension-pdf.png" alt="Attachment"/>
<span class="title">Title of download</span>
<span class="size">xxx kB</span>
</a>
关于iphone - Span inside anchor 标签阻止 iPhone 上 Safari 的点击事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10780702/