我正在将一个网络应用程序从 iPhone 移植到 Android。出乎意料的是,按钮像往常一样工作,除了它们在 Activity 状态下不改变背景。在 Mobile Safari、桌面 Chrome 中一切正常。有什么想法,有什么问题吗?
我有很多技巧比如
img, input, div, button, table:focus
{
outline-width: 0;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
也许是其中之一?
问候,
更新
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<style type="text/css">
button
{
cursor: pointer;
background-size: 100% 100%;
background-color: transparent;
background-position: center center;
background-repeat: no-repeat;
border: 0px;
color: white;
font-family: Arial;
}
button
{
width: 337px;
height: 94px;
font-size: 50pt;
}
button.pink
{
background-image: url(images/buttonpinknormal.png);
}
button.pink:active
{
background-image: url(images/buttonbluepressed.png);
}
</style>
</head>
<body>
<button class="pink"></button>
</body>
</html>
这是一小段代码,不适用于 Android。它适用于 Mobile Safari、Safari、Chrome。
最佳答案
:active 在 Android Webkit 中不起作用。证明及更多:How to simulate :active css pseudo class in android on non-link elements?
感谢 Colin 提出测试的想法。
更新
我尝试了以下技巧。
- 将 :active 替换为 :hover。不起作用。如果您点击按钮,它会变成按下状态,但您可以在 z 方向上移动手指,使其远离屏幕,因此按钮永远不会恢复到正常状态。
- 将“按钮”元素替换为“a”。不起作用。不仅难以模仿按钮的外观,而且感觉也很难,因为它根本不会被按下。
似乎触摸事件是完成工作的唯一方法。
关于android - 处于 Activity 状态时,按钮不会重绘 (Android Webkit),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9863940/