Safari 实现 display:none 与其他浏览器不同

Question

问题： 我有一个 CSS 错误，它只发生在 Safari 中，而不是任何其他浏览器（回到 IE8）。它不是由 experimental/unsupported 功能引起的，因此功能嗅探不是解决方案。从本质上讲，它似乎在错误地实施 display:hidden & display:table。

我考虑过为 Safari 加载单独的样式表，但我不想依赖浏览器嗅探的不可靠性。

详情： 我有一个文本框在悬停另一个元素时应用 display:hidden。文本框不再呈现，但似乎与页面上的其他元素进行交互，因为正在显示的元素被强制向下放置在页面上。我知道这应该是不可能的，但无法弄清楚为什么其余元素会受到影响。

JSBin

此 JSBIN 演示了该页面在 Chrome、Firefox、Opera、IE 测试回 IE8 和一些移动浏览器中的预期效果。然而，当在 Safari 中打开时（并且页面足够宽以在同一行上容纳两个文本区域元素）应用悬停效果时元素会重新排列。

任何人都可以找出这里的问题或可以更改哪些内容以使其与浏览器一致吗？

Answer 1

容器 .my-box 设置为 display: inline-block。 CSS 中垂直对齐的默认值为 baseline。 Safari 似乎以某种方式将 .my-box 中包含的元素（使用 display: table 和 display: inline-block）与其他浏览器不同。您可以使用 CSS:

强制 Safari（和所有其他浏览器）将所有元素对齐到顶部

.my-box {
     vertical-align: top;
}

演示

Try before buy

Safari 实现 display:none 与其他浏览器不同

Safari implementing display:none differently to other browsers

css

browser

safari

hidden

hover