Lesson learned on IE compatibility issues

[genkio]

When you set an inline element to display: inline-block, you'll need to specify a fixed height to that element. without the height specified (IE 9) this is how it suppose to look

The fix

a {
  .inline;
  .font-bold;
  .cursor;
  height: 30px; // the fix
  margin-top: 15px;
  padding: 5px 10px;
}

So, you try to line up say 4 elements in a row, and in order to set them apart from each other, you set a right margin to each element, however, in IE (9), the 4th element will show up in the second row.

The fix

.parent-class {
  &:nth-child(4n) {
    .some-elem {
      margin-right: 0;
    }
  }
}