Question

我目前正在开发一款触控优化网页应用。概念设计的一部分包括易于导航，因此我设计了一些漂亮的div，其中有一个“点击”或“触摸”事件，当你触摸它时看起来很漂亮。

这在计算机网络浏览器和Android浏览器上运行良好，但是当我在iPad上的Safari上使用它时，它不会显示阴影。我的所有语法都是正确的，所以我可以得出结论，这是一个bug或不支持。

我的问题是：是否有人遇到此问题并发现了修复或解决方法？

CSS：

div.touch-button:active {
    width: 300px;
    border: 1px solid #ccc;
    padding: 10px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

div.touch-button {
    width: 300px;
    border: 1px solid #ccc;
    padding: 10px;
    -moz-box-shadow: 0 0 5px rgba(0,0,0,0.5);
    -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.5);
    box-shadow: 0 0 5px rgba(0,0,0,0.5);
}

Answer 1

您应该在-moz-box-shadow和-webkit-box-shadow之前使用框阴影。这在过去为我解决了同样的问题。

div.touch-button {
    width: 300px;
    border: 1px solid #ccc;
    padding: 10px;    
    box-shadow: 0 0 5px rgba(0,0,0,0.5);
    -moz-box-shadow: 0 0 5px rgba(0,0,0,0.5);
    -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.5);
}

Answer 2

使用-webkit-appearance：none;为了覆盖默认值，试试这个..

div.touch-button {
    width: 300px;
    border: 1px solid #ccc;
    padding: 10px;
    -webkit-appearance: none;
    -moz-box-shadow: 0 0 5px rgba(0,0,0,0.5);
    -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.5);
    box-shadow: 0 0 5px rgba(0,0,0,0.5);
}

div.touch-button:active {
    width: 300px;
    border: 1px solid #ccc;
    padding: 10px;
    -webkit-appearance: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

Answer 3

确定，经过很多压力和乱七八糟，放弃了。我在尝试解决另一个问题时遇到了这个问题。

它与视口设置有关。

不正确： <meta name="viewport" content="width=device-width" />

正确： <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />

iPad上的div box-shadow

3 个答案: