在Chrome上测试响应能力时，按钮无法正确显示

Question

在Chrome中测试响应能力时（ipad pro模式），该按钮显示为挤压状态。平板电脑和手机视图上的所有其他按钮均正确显示。我尝试在按钮上设置最小宽度，但这无济于事，因为该按钮在页面上看起来很大。有什么办法可以将按钮向左移动更多或将按钮设置在中间。

button id="updatePasswordButton" class="btn btn-block btn-success" data-bind="enable: canUpdatePassword, click: resetPassword">



.btn-success {
    min-width: 140px;
}

Answer 1

我相信您忘了在按钮标签或关闭标签之间写一些东西。 试试这个：

.btn-success {
  min-width: 140px;
}

<button id="updatePasswordButton" class="btn btn-block btn-success" data-bind="enable: canUpdatePassword, click: resetPassword">Update</button>

Answer 2

您可以尝试编写仅适用于Chrome浏览器的媒体查询。 这是示例： How to apply specific CSS rules to Chrome only?