css - Safari 会切断按钮内元素的框阴影

Question

我有一个按钮，里面有一个接收框阴影的元素:

button {
  padding: 0;
  border: 0;
  margin: 0;
  overflow: visible;
  -webkit-appearance: none;
  background: white;
}

.shadow {
  display: inline-block;
  vertical-align: middle;
  height: 40px;
  width: 40px;
  border-radius: 20px;
  background: #dddddd;
  box-shadow: 0 0 20px black;
}

<button>
  <span class="shadow"></span>
  <span>Some Text</span>
</button>

在 Safari 中，此阴影在 <button> 的边缘被切断元素，看起来像这样:

如你所见，我尝试了 -webkit-appearance: none和 overflow: visible已经。我还发现，如果我将按钮更改为 div，则不会出现此问题，但这意味着是一个交互式元素，因此出于可访问性原因，这不是一个好主意。

在搜索这个问题时，到目前为止我没有找到太多帮助，但我想知道是否有人可能知道任何最近的解决方法或 Safari CSS hacks 可以帮助解决这个问题。

Answer 1

我进行了更多搜索(针对 Safari 中按钮上与框阴影无关的裁剪)并找到了一个简单的解决方案。

添加position: relative至 .shadow让元素超出 <button> 的范围Safari 中的标记。听起来这也适用于文本溢出等情况。