CODEWITHSUNDEEP
htmlcsssafari
Rcls
Rcls

Reputation: 479

Safari inline-block not floating

I'm using the following HTML and CSS to create elements which are tightly together in a 100% space (floating?).

<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

enter image description here

This style works great on all browsers - except Safari for Windows. I'm not sure about the "real" Safari but my iPad seems to work fine. Is this an issue I should be worried about?

Upvotes: 0

Views: 1168

Answers (1)

Lance
Lance

Reputation: 3932

In Safari for Windows, setting the width to:

width: 49.7%;

will give the result you are looking for.

You can detect the browser and then apply the style just to Safari for Windows.

See here for how to detect Safari for Windows:

Detection for Safari Windows with Javascript

Upvotes: 2

Related Questions