html - 宽度为零的按钮仍会影响 Safari 中父级的宽度

Question

我正在尝试根据悬停状态更改某些 button 的宽度。也就是说，它们的初始宽度应为 0，悬停时应自动宽度。

.parent {
  float: left;
  border: 2px solid darkblue;
}

.child {
  float: left;
  width: 0px;
  padding: 0;
  margin: 0;
  border: none;
  overflow: hidden;
}

.parent:hover .child {
  width: auto;
}

<div class="parent">
  <button class="child">a</button>
  <button class="child">b</button>
  <button class="child">c</button>
</div>

JSFiddle

这在大多数浏览器上都按预期工作(来自 Firefox 的屏幕截图):

但是，Safari 似乎仍在考虑(零宽度，不可见)按钮宽度来计算父级的宽度:

我遗漏了 Safari 的异常渲染是否有原因，或者这可能只是一个错误？

Answer 1

是的，这似乎是一个错误。 Safari 的 Web Inspector 说每个按钮的宽度确实为零，所以很明显问题不是按钮。也许 Safari 正在根据每个按钮中的内容计算包含 block 的宽度，而不考虑宽度声明或其他内容。

设置 max-width 而不是 width 似乎可行，这只会让这一切变得更加奇怪:

.parent {
  float: left;
  border: 2px solid darkblue;
}

.child {
  float: left;
  max-width: 0;
  padding: 0;
  margin: 0;
  border: none;
  overflow: hidden;
}

.parent:hover .child {
  max-width: none;
}

<div class="parent">
  <button class="child">a</button>
  <button class="child">b</button>
  <button class="child">c</button>
</div>