Safari 内联块不浮动

Question

我正在使用以下 HTML 和 CSS 来创建以 100% space（浮动？）紧密结合在一起的元素。

<div class="wrapper">
    <div class="image">This is image</div>
    <div class="content">This is content</div>
</div>

.wrapper {
font-size: 0;
}
.image, .content {
display: inline-block;
box-sizing: border-box;
width: 50%;
color: #000;
font-size: 18px;
}
.image {
background: #f6f6f6;
}

JSFiddle.

最终结果：Chrome 顶部，Safari Windows 底部

此样式适用于所有浏览器 - 除了 Windows 的 Safari。我不确定 "real" Safari，但我的 iPad 似乎工作正常。这是我应该担心的问题吗？

Answer 1

在 Windows 的 Safari 中，将宽度设置为：

width: 49.7%;

会给你想要的结果。

您可以检测浏览器，然后将样式仅应用到 Windows 的 Safari。

请参阅此处了解如何为 Windows 检测 Safari：

Detection for Safari Windows with Javascript

Safari 内联块不浮动

Safari inline-block not floating

html

css

safari