Safari內聯塊不浮動

Question

我正在使用以下HTML和CSS來創建緊密結合在一起的元素（浮動？）。

<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：鉻頂部，Safari瀏覽器的Windows底

這種風格的偉大工程在所有瀏覽器 - 除了Safari瀏覽器的Windows。我不確定「真正的」Safari，但我的iPad似乎工作正常。這是我應該擔心的問題嗎？

Answer 1

在Safari for Windows中，寬度設置爲：

width: 49.7%; 

會給你正在尋找的結果。

您可以檢測瀏覽器，然後將樣式應用於Safari for Windows。

看到這裏如何檢測Safari瀏覽器的Windows：

Detection for Safari Windows with Javascript