Question

我正在构建PWA并使用Chrome和Safari进行测试。除了我按钮的边框外，所有两种浏览器似乎都可以正常工作。

我在按钮上使用了以下CSS：

{
-webkit-appearance: none;
background-color:<%= ConfigurationManager.AppSettings["default_color"] %>;
background-image: url('../Images/pick.png');
background-position:center center;
background-repeat:no-repeat;
background-size:contain;

border-style: solid;
border-color:<%= ConfigurationManager.AppSettings["default_color"] %>;
border-width: 10px;
/* TL - TR - BR - BL */
border-radius:0 5px 5px 0;
height:100%;
margin: 0;
padding: 0;
width:100%
}

在Chrome和Firefox中，它可以正常工作，并且边框是无缝的。但是，在Safari中似乎还有一个额外的白色垂直边框。因此，该按钮被挤压，与左侧的按钮（无边框）不匹配

这是怎么回事。

我使用了Web检查器，但似乎找不到问题。我确实需要用户边框，因为以其他分辨率使用时，任何其他方法都会使背景图像变形。（该PWA既可以在浏览器中使用，也可以在手机中使用）

Safari中的CSS边框宽度行为问题

0 个答案: