CSS Display Inline-Block Issue with Ie

IE CSS display: inline-block Rendering issue

Add DOCTYPE to your html,

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

It works for me after I added this.

Note: in jsFiddle, DOCTYPE was automatically generated so it will work there.

Edit 1:
Check this for more information,

Edit 2:
You can read more about inline-block styling here

IE11 CSS display inline-block overflowing inside flexbox

In IE11, flex elements must have some sort of width defined. Add this to your code:

main {
  flex-grow: 1;
  flex-shrink: 1;
  width: 100%;              /* NEW */
}

radio-widget {
  display: inline-block;
  max-width: 100%;          /* NEW */
}

revised demo

References:

Why IE11 doesn't wrap the text in flexbox?
CSS wrap text not working in IE

inline-table and inline-block issues in IE and FF

After all I have a good solution for this.
First I used inline-table instead of inline-block for each box of my win logo.
Second I increase the width of winLogo (parent of four box) a bit.
Third I detect whether if it's IE then I remove maigin-left of my win_logo_2 nad 4.
Here is Codepen Which works OK on IE.
Still working on FF and Safari

`display: inline-block` not working in IE10

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="Sample Image">

  <img src="http://clients-are-heroes.jackietreehorn.be/tombubbe/wp-content/uploads/2015/10/beeld2.jpg" alt="Sample Image">

  <img src="http://clients-are-heroes.jackietreehorn.be/tombubbe/wp-content/uploads/2015/10/DSC0014-waterkant-rechts.jpg" alt="Sample Image">

</div>

CSS Display inline-block issue with IE

This link can help to solve it:
Cross-Browser Inline-Block

The very least you need to make inline-block work cross-browser (incl IE6/7) is:

.my-inline-block {
    display: inline-block;
    *zoom: 1;
    *display: inline;
}

You may need to fix additional quirks; details and explanations are in the link...

Element inline-block has different position when used in IE or Microsoft Edge

Here is a Fiddle for you too look at in each browser. I added a parent div with stripes and also added a red outline around the invisible link, so that we would have some reference points.

The invisible square link is about 200px higher than FF/Chrome positioning.

For me, across all the browsers, the link renders at 3.5 bars above the bottom. Where does it render for you?

#parent {

  outline: thin solid black;

  position: relative;

  height: 180px;

  width: 180px;

  background: repeating-linear-gradient(to top, white, white 10px, yellow 10px, yellow 20px);

}

#box-scenario {

  position: absolute;

  margin-top: 43%;

  margin-left: 37%;

  background-color: rgba(255, 0, 0, 0);

  width: 11%;

  height: 21%;

  display: inline-block;

  outline: thin solid red;

}

<div id="parent">

  <a id="box-scenario"></a>

</div>

Why does display: inline-block; in IE have padding and margin that I can't clear?

It's most likely because you have at least one space or linebreak between the inline-block element tags in your markup.

Linebreaks will be converted to a single space between inline-block elements. So the extra space you're seeing is not padding or margin, but an actual space character in the text of the containing element.

There are a few workarounds:

~~Uglify~~ Change your markup to remove or reposition the linebreaks:

<ul>
    <li>item</li>
    <li>item</li>
</ul>
<!-- becomes -->
<ul>
    <li>item</li><li>item</li>
</ul>
<!-- or -->
<ul>
    <li>item</li><li>
        item</li>
</ul>

Use float: left or float: right to display your block elements inline instead of inline-block. Note that this will introduce other issues, like having to ensure that the containing element is clearfixed.
Set word-spacing: -1em on the containing element. Note that if your inline-block elements contain any text, and you don't want this text to have wonky word spacing, you'll need to override the inherited rule with word-spacing: normal on the inline elements. Demo: http://jsbin.com/ucivel/1/edit