为什么盒子大小调整：在Mac上填充框看起来不同？

Question

＆＃13;

＆＃13;

#map-search-button {
    display: inline;
    float: right;
    border-style: solid;
    border-image: url(https://i.imgur.com/r35pKjB.png) 8 8 8 8;
    border-width: 5px 5px 5px 5px;
    height: 50px;
    width: 125px;
    background-color: #00ACC8;
    background-clip: padding-box !important;
    font-size: 1.5em;
    text-align: center;
    line-height: 40px;
    color: white;
}

＆＃13;

<div id="map-search-button">Find us!</div>

＆＃13;

＆＃13;

＆＃13;

在Windows上的Chrome上，按钮看起来像我预期的那样：

但是在Mac上的Chrome上，按钮看起来像这样：

这是为什么？我可以改变CSS中的任何东西，以保持边框图像稳固吗？

Answer 1

我强烈建议您使用border-radius创建一个圆角按钮，而不是尝试实现border-image。请参阅下面的内联示例。

至于为什么你的看起来不正确的技术解释，如果你想进一步追求这条路线，你可能想要研究制作边界图像的最佳实践。您的Mac可能有Retina显示屏，并且图像放大不当。

使用border-radius：

body {
  font-family: impact, sans-serif;
  letter-spacing: .02em;
}

#map-search-button {
  width: 125px;
  height: 50px;
  line-height: 50px;
  background-color: #00ACC8;
  border: 5px solid #00ACC8;
  border-radius: 8px;
  font-size: 1.5em;
  text-align: center;
  color: white;
}

<div id="map-search-button">FIND US!</div>