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

【问题标题】：Apple iphone causing button to get squished on websiteApple iphone导致按钮在网站上被压扁
【发布时间】：2017-03-02 14:51:54
【问题描述】：

我遇到了一个问题，在我的网站上，一个按钮被压扁但仅在实际的 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;}

【问题讨论】：

你能提供一些代码吗？
ca_btn 的 css 是什么？
按钮看起来像是提交输入类型，而不是屏幕截图中的按钮。您可以使用 css 设置大部分按钮（背景颜色、边框）的样式，而不是使用图像。然后在按钮中间有一个透明的png，周围有一点填充
这个问题只出现在iphone上有什么原因吗？所有其他手机都显示正常
我已经回答了

【解决方案1】：

试试这个来去掉苹果的样式

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

【讨论】：

【解决方案2】：

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

【讨论】：