Internet Explorer forces displaced positioning

Hi guys,

I’ve created a reference page for a client with a mosaic of a lot of houses. Everything aligns and works fine in every browser, but Internet Explorer is making problems as usual.

Usually in other browsers every picture is in line and we’ve got nice rows. But in IE 9-11 something seems to bee displaced (lower versions not supported):

Each .gallery-item gets individual inline attributes from either the script “Masonry” or WordPress (I’m not quite sure).

element.style {
  position: absolute;
  left: 419px; /* varies with each gallery-item */
  top: 1400px; /* varies with each gallery-item */
}

The styles for .gallery-item are:

#gallery-1 .gallery-item {
  float: left;
  margin-top: 10px;
  text-align: center;
  width: 12%;
}

.gallery-item {
  margin: 0 3px 3px 0px !important;
  width: 12% !important;
}

For more info please visit this Live-Link.

Where could the fix for IE be?

Thank you all in advance for your help and consideration.