属性 'border:none' 在 Safari 浏览器中无法正常工作

Question

我在 safari 浏览器中应用属性“border:none”时遇到了一些问题。 我尝试将名为“profile-label”的 css class 具有属性“border:none”应用到标签“label”中，如下面的代码：

 .profile-label { border: none; cursor: pointer; }

 <label for="photo" class="profile-label" type="submit"> <img src="https://picsum.photos/536/354" alt="Foto" width="50" height="50" class="profile-photo" /> <input type="file" id="photo" hidden name="ProfileImage"/> </label>

该属性在 safari（边框：无）中无法正常工作，但在所有其他浏览器中都可以正常工作。 有谁知道为什么？

safari 浏览器中带边框的图像：

Answer 1

您可能想尝试将以下属性添加到 CSS：

outline: none;

不过，我不确定我能回答为什么会这样。

Answer 2

它显示了一个按钮边框，因为 label 使用 type="submit" 属性包装图像。

Safari 正在添加所有按钮的默认样式。

尝试添加-webkit-appearance: none ; 到您的 label 样式

或者去掉属性type=submit