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

Posted 2023-03-11

【中文标题】Apple iphone导致按钮在网站上被压扁

【英文标题】：Apple iphone causing button to get squished on website

【发布时间】：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 可以工作。 试试这两件事。