移动浏览器中填充无响应的常规链接答案

【问题标题】：Regular link with padding unresponsive in mobile browsers移动浏览器中填充无响应的常规链接
【发布时间】：2013-07-13 19:58:03
【问题描述】：

我有一个基于 Twitter Bootstrap 的网站，在常规旧链接按钮上有一些奇怪的问题（例如：http://jsfiddle.net/RK3RC/）

HTML

<a class="button" href="http://jsfiddle.net/">Click Me</a>

CSS

.button {
    background-color: #bc4b4e;
    color: #ffffff;
    display: block;
    border-radius: 45px;
    border: none;
    text-decoration: none;
    position: absolute;
    font-size: 18px;
    padding: 14px 50px;
    margin: 0px;
    border-width: 0px;
    line-height: 20px;
    white-space: nowrap;
    min-width: 0px;
    min-height: 0px;
    -webkit-transform: rotate(0deg);
    opacity: 1;
    left: 220px;
    top: 20px;
    visibility: visible;
}

.button:hover {
    background: #d35559;
}

这些按钮在桌面浏览器中工作得非常好并且符合预期，但在移动浏览器（触摸设备）中没有响应。如果您通过触摸单击它们，则不会发生任何事情 - 按钮无响应。然而，有趣的是，如果链接是指向 same 页面上的锚标记，它会起作用（只是不能指向外部页面）。

有什么想法/建议吗？我在网上搜索过，但没有找到遇到完全相同问题的人，这本身就有点奇怪。

【问题讨论】：

left: 220px; 在这种情况下，在响应性方面会给您带来无穷无尽的问题。你想达到什么目标？
您的链接在 iPhone 5 和 iOS 6 上使用 Chrome 和 Safari 为我打开。我不确定我是否理解您的问题。
小提琴在 dolphin 的 gs3 上为我打开。
@Vector - 绝对定位值实际上是由JS生成并缩放到屏幕，所以定位本身就可以了。
@MichaelFreake 也为我工作（也是 iPhone5 和 iOS6）。

标签： css button mobile twitter-bootstrap hyperlink

【解决方案1】：

好的，明白了。

这实际上是因为在页面的不同部分有一个基于 JQuery 的滑块，它具有启用触摸的设置（允许用户通过滑动来浏览滑块）。这影响了按钮对触摸的响应。关闭该触摸设置后，各处的按钮都会正常响应。

感谢所有帮助和建议。你们摇滚。

【讨论】：