CODEWITHSUNDEEP
htmlcssinternet-explorer
romeovs
romeovs

Reputation: 5943

`display: inline-block` not working in IE10

I've got a horizontal scrolling image list:

<ul>
  <li><img src="..."/></li>
  <li><img src="..."/></li>
</ul>

I set the li's to be inline-block and have height: 100%:

ul {
  height: 100%;
  white-space: nowrap;
}
li {
  height: 100%;
  display: inline-block;
}
img {
  height: 100%;
  width: auto;
}

This seems to work fine on all the browsers I have running on my macbook. Yet it fails to work on IE10.

In IE10, the lis are correctly positioned after each other, but their width does not adapt to the width of the images (which is dynamic, since it follows the browser height). Instead, they have the width of the full-size image.

I thought setting inline-block on the lis should make them adapt their with to their content, but apparently this isn't so on IE10.

What can I do to fix this?

The dev version of the site is online at: http://clients-are-heroes.jackietreehorn.be/tombubbe/project/flor/

Upvotes: 1

Views: 3787

Answers (2)

Sampson
Sampson

Reputation: 268344

As the site stands right now, there are issues in browsers other than Microsoft Edge.

For instance, if you start with a smaller Chrome window, load the page, and then maximize the window, you'll notice the failure of Chrome to properly resize the images. This isn't ideal.

After spending some time looking into the issues between Chrome and Microsoft Edge, I see that the browsers are not very good as resizing the containers when the images within are not at their natural dimensions. Just about every browser I tested failed in some way here.

One potential work-around that I considered was the use of display: table on the container, and on the content elements a value of display: table-cell. This would have worked, had your images been the same size, but with the second image being ~200% the dimensions of the first and third, this causes irregularities in the size of the resulting layout.

Since you suggested a baseline browser support of Internet Explorer 10, flexbox may be a reliable alternative for us. It's concise, supported to a large degree in IE 10, and yields more consistent ouput.

.container {
  display: flex;
  overflow-x: scroll;
  position: absolute;
  top: 0; left: 0;
  bottom: 0; right: 0;
}
  section {
    min-width: 496px;
    box-sizing: border-box;
  }
    img {
      height: 100%;
    }
<div class="container">
  <section>
    <p>weekendwoning aan een meer</p>
    <p>Deze vakantiewoning is gel...</p>
    <p>Het ontwerp evolueerde van...</p>
    <p>De woning  bestaat uit een...</p>
  </section>
  <img src="http://clients-are-heroes.jackietreehorn.be/tombubbe/wp-content/uploads/2015/10/foto-1.jpg" alt="">
  <img src="http://clients-are-heroes.jackietreehorn.be/tombubbe/wp-content/uploads/2015/10/beeld2.jpg" alt="">
  <img src="http://clients-are-heroes.jackietreehorn.be/tombubbe/wp-content/uploads/2015/10/DSC0014-waterkant-rechts.jpg" alt="">
</div>

This approach, while largely satisfactory, still had a couple of drawbacks:

  1. Chrome needed height: 100% on the images for accurate sizing
  2. Internet Explorer doesn't handle window resizing all that well

In spite of these drawbacks, Chrome, Firefox, Internet Explorer, and Edge all yield the same output.

Your original approach revealed a couple of interop differences between Microsoft Edge and Google Chrome. On account of this, I will be opening up a bug for the Edge team to investigate the difference(s) further.

Upvotes: 1

user4454229
user4454229

Reputation:

Try giving a width: auto to the li tags. Then, account for the margins placed automatically on inline-block elements.

Upvotes: 0

Related Questions