Safari内联块不浮动

Question

我正在使用以下HTML和CSS来创建在100％空间中紧密组合在一起的元素（浮动？）。

<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

Endresult：Chrome top，Safari for Windows bottom

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

Answer 1

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

width: 49.7%;

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

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

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

Detection for Safari Windows with Javascript