Question

问题： 我有一个CSS错误，只发生在Safari而不是任何其他浏览器（回到IE8）。它不是由实验/不支持的功能引起的，因此功能嗅探不是解决方案。基本上它似乎正在实施display:hidden＆amp; display:table错误。

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

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

JSBin

此JSBIN演示了该网页在Chrome，Firefox，Opera，IE测试版和一些移动浏览器中完美无瑕地运行。但是，当在Safari中打开（并且页面足够宽以适合同一行上的两个textarea元素）时，元素会在应用悬停效果时重新洗牌。

任何人都可以请点击这里的问题或可以改变哪些内容使浏览器保持一致？

Answer 1

容器.my-box设置为display: inline-block。 CSS中垂直对齐的默认值为baseline。 Safari似乎将display: table中包含的元素（display: inline-block和.my-box）与其他浏览器不同。您可以使用此CSS强制Safari（和所有其他浏览器）将所有元素对齐到顶部：

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

<强>演示

Try before buy

Safari实现显示：与其他浏览器无异

1 个答案: