Apple iphone导致按钮在网站上被压扁

Question

我遇到一个问题，在我的网站上有一个按钮被压扁但只在实际的iphone上，我无法在任何模拟器或模拟器上重新创建它来调试它。

我正在使用html和cakephp

这是截图

这是按钮代码

<button id="ca_btn">
<img src="<?= CAKEPHP_URL ?>/img/ca_button.jpg" border="0" />
</button>

CSS

#ca_btn {

        background-color: white;
        border:none;
    }

    #ca_btn:focus{ outline:0;}

Answer 1

尝试这样做以取消苹果的造型

#ca_btn {
    background-color: transparent;
    border:none;
    -webkit-appearance: none;
    border-radius: 0;
}

Answer 2

您应该为此编写媒体查询。 也许Min-height可以工作。 试试这两件事。