IE11 places extra padding around list items

Question

I have a strange issue with the way that Internet Explorer 11 handles uls that doesn't happen with any other browser.

Here is the picture of the ul in IE11:

And here is the picture of the ul in Chrome and other browsers:

.iconImgBA {
  max-width: 2.4rem;
  margin-right: 1rem;
}
.listtweaksMA-ba2 {
  padding-left: 0;
  > li {
    text-align: center;
    margin-bottom: 1em;
    &: last-of-type {
      margin-bottom: 0;
    }
    font-size:1.7rem;
    list-style-type:none;
    padding-left:0;
  }
}

<ul class="listtweaksMA-ba2">
    <li><img class="iconImgBA" align="center" src="http://placehold.it/50x50" alt="Modern Digital Marketing icon">Lead Generation</li>
    <li><img class="iconImgBA" align="center" src="http://placehold.it/50x50" alt="Modern Digital Marketing icon">Marketing Optimized Websites</li>
    <li><img class="iconImgBA" align="center" src="http://placehold.it/50x50" alt="Modern Digital Marketing icon">Social Media Marketing</li>
    <li><img class="iconImgBA" align="center" src="http://placehold.it/50x50" alt="Modern Digital Marketing icon">Content Marketing</li>
    <li><img class="iconImgBA" align="center" src="http://placehold.it/50x50" alt="Modern Digital Marketing icon">Search Engine Optimization</li>
</ul>

Is there something that I'm doing wrong with this? If so what?

Answer 1

I figured out that the problem is the Internet Explorer 11 can't correctly interpret images with max-widths within lis. Changing max-width to width solves my problem. My hate for Internet Explorer has been renewed.