Display:Inline-Block Not Working on Safari

Display:inline-block not working on safari

Debugging

If something like this happens to you in the future you need to debug it.

All modern browsers feature in-built Web Inspectors/Developer Tools (and if they're not good enough for you - you can always grab Firebug).

If website looks different in X browsers all you need to do is to inspect the different-looking elements and then see what CSS rules are being applied to them. The differences are almost always related to different rules being applied. If you can't track existing rules in your CSS files they're most likely being added with JavaScript.

I've recorded a quick gif for your case, notice everything is fine after you remove floats and min-widths from your links (as previously stated by Imube). You don't actually need floats there, as inline-block will work just fine. I'd generally recommend avoiding floats wherever possible.

Opera vs Safari - tracking your problem using Dev Tools

Uncompressed: https://gifyu.com/images/debug47afb.gif

Why it was not working

Looks like Safari interprets ignores min-width: auto in comparison other browsers (by the way what is auto supposed to mean in this case?).

Here's a demo that uses min-width of 150px for inline-block link and then overwrites it with auto. It works fine in other browsers, but in Safari the links are still 150px wide.

It's really easy to track down using dev tools:

Opera:

Safari:

DEMO

Learn more

Read more about dev tools for Chrome, Firefox and in Safari.

Safari inline-block not floating

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

display:inline-grid doesn't support on very fresh safari

It does not work because the safari does not support inline-grid;

The supporting is only from:https://caniuse.com/#feat=css-grid

safai: version 11.1 + 
safari ios: from version 10.3 +

You can use display: inline-block; instead inline-grid;

ul{

   list-style-type: none; 

}

ul>li{

     display: inline-block;

}

<ul>

  <li>icon1</li>

  <li>icon2</li>

  <li>icon3</li>

  <li>icon4</li>

</ul>

CSS broken with inline-block in safari - width of zero not set

Thanks for the help Anon.

As it happens it was easier to create this from scratch as suggested by Anon.

http://jsfiddle.net/foetalstalk/N2GSV/23/

.accord-group, .accord-heading, .accord-body
{
    display:inline-block;
}
.accord-body 
{
    vertical-align:top;
    visibility:hidden;
    /* non zero width - for safari */
    margin-left:-1px;
    width:1px;
    -webkit-transition:all 0.35s ease;
    -moz-transition:all 0.35s ease;
    -o-transition:all 0.35s ease;
    transition:all 0.35s ease;
    overflow:hidden;
}

.accord-body.in 
{
    visibility:visible;
    margin-left:0px;
    width:100px;
}

See fiddle for html and js.

---

Related Topics