html iOS设备上的按钮无法正确显示

问题描述：

我有一个html按钮，它可以在所有浏览器上正确渲染，但在iOS设备上渲染不正确。html iOS设备上的按钮无法正确显示

这里是CSS

.textCont .block button { 
    border: none; 
    background: white; 
    border-radius: 7px; 
    -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); 
    -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); 
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); 
    height: 23px; 
    width: 35px; 
    line-height: 0; 
    margin-left: 5px; 
    position: relative; 
    top: -4px; 
}

在iOS装置它显示按钮更宽然后它应该被它加宽向左。我认为这可能是因为我有余量，但设置为0px后没有任何变化。我感到迷茫，任何想法可能是什么问题？

您是否正在使用媒体查询来定位iDevice？ – SajithNair

@SajithNair是的，我正在使用媒体查询 – Tamerlane

我相信你没有正确定位iDevice。您必须根据分辨率/视网膜因素使用正确的媒体查询来定位每个iDevice版本。一旦你的目标正确，那么只有相应的CSS才会生效 – SajithNair

答

一些建议可导致答案。

尝试margin-left: -5px; padding-left: 0px;

尝试background-position: 40% 50%;（这里https://developer.mozilla.org/samples/cssref/background-position/更多信息）

答

尝试增加-webkit-appearance: none;你的CSS

试过了，相同的结果 – Tamerlane

答

或许元素从某处继承填充。请尝试添加“padding：0;”以重置填充

提示：如果有疑问，请始终检查浏览器如何使用Web检查器计算CSS属性并切换到计算机选项卡。

enter image description here

html iOS设备上的按钮无法正确显示

相关推荐