html - Safari 内联 block 不 float

Question

我正在使用以下 HTML 和 CSS 来创建在 100% 空间( float ？)中紧密结合在一起的元素。

<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 for Windows 底部

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

Answer 1

在 Windows 版 Safari 中，将宽度设置为:

width: 49.7%;

将给出您正在寻找的结果。

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

有关如何检测 Windows 版 Safari 的信息，请参见此处:

Detection for Safari Windows with Javascript