iPhone iOS将不会正确显示框阴影

该devise

响应式devise中的联系表单具有包含阴影和常规外部阴影的input字段。 看下面的图片。

---

代码

input { background:#fff; height:auto; padding:8px 8px 7px; width:100%; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; border:#fff solid 3px; border-radius:4px; box-shadow:0px 0px 5px rgba(0, 0, 0, .25), inset 2px 2px 3px rgba(0, 0, 0, .2); } 

---

问题

iOS v4 +不能正确显示方块阴影。 看下面的图片。

---

经testing

我曾尝试使用-webkit-box-shadow。

 -webkit-box-shadow:0px 0px 5px rgba(0, 0, 0, .25), inset 2px 2px 3px rgba(0, 0, 0, .2); 

我已经应用了display:block; 到input元素。

---

目前的解决方法

我宁愿不必这样做，但这是我能得到我想要的效果的唯一方法。

HTML

 <p><input /></p> 

CSS

 p { width:50%; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-shadow:0px 0px 5px rgba(0, 0, 0, .35); border-radius:4px; } input { background:#fff; height:auto; padding:8px 8px 7px; width:100%; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; border:#fff solid 3px; border-radius:4px; box-shadow:inset 2px 2px 3px rgba(0, 0, 0, .2); } 

即使有这个解决方法，iOS中的插入阴影也不能正确渲染; 但足够接近。

---

我的问题

是否有可能在iOS设备上正确呈现单个元素上的多个箱形阴影实例？ 如果不是，那么插入的影子呢？ 还是我用这个属性和它的值不正确？

提前致谢！

Answer 1

尝试添加-webkit-appearance: none; iOS往往会搞乱表格。