Page looks fine on Chrome and other browsers, but on Internet Explorer its added loads of space inbetween my images?

Question

not sure whats going on here. I didn't even notice the compatibility issue until someone pointed out. The images are positioned fine on Chrome and other browsers, but on Internet Explorer after the first two images there seems to be an incredible amount of white space before the next two?

I'd like to know how resolve this so I can avoid it in the future, so theory on why its doing it and how your fix fixes it along with an answer would be brilliant. Here to learn, not just get quick answers!

Album with screenshot of what the page looks like on IE, and what it looks like on Chrome: https://i.sstatic.net/RVoxY.jpg

HTML & CSS:

<img style="width: 45%; display: block; margin-left: auto; margin-right: auto; float: none;" src="/sites/all/themes/br/assets/images/LNS-media-pack_survey-results-1.jpg" />
<img style="width: 45%; display: block; margin-left: auto; margin-right: auto; float: none;" src="/sites/all/themes/br/assets/images/LNS-media-pack_survey-results-2.jpg" />
<img style="width: 45%; display: block; margin-left: auto; margin-right: auto; float: none; src="/sites/all/themes/br/assets/images/LNS-media-pack_survey-results-3.jpg" />
<img style="width: 45%; display: block; margin-left: auto; margin-right: auto; float: none;" src="/sites/all/themes/br/assets/images/LNS-media-pack_survey-results-4.jpg" />
<img style="width: 45%; display: block; margin-left: auto; margin-right: auto; float: none;" src="/sites/all/themes/br/assets/images/LNS-media-pack_survey-results-5.jpg" />

Thanks!

Answer 1

On the third image you forget to close your style attribute

..float: none; src="..

You need to

..float: none;" src="..

I do not know if it's the fault

Answer 2

The third image tag isn't correct. You're missing the closing " on the style attribute, which is causing the src attribute to not being picked up. Replace the code with this:

<img style="width: 45%; display: block; margin-left: auto; margin-right: auto; float: none;" src="/sites/all/themes/br/assets/images/LNS-media-pack_survey-results-1.jpg" />
<img style="width: 45%; display: block; margin-left: auto; margin-right: auto; float: none;" src="/sites/all/themes/br/assets/images/LNS-media-pack_survey-results-2.jpg" />
<img style="width: 45%; display: block; margin-left: auto; margin-right: auto; float: none;" src="/sites/all/themes/br/assets/images/LNS-media-pack_survey-results-3.jpg" />
<img style="width: 45%; display: block; margin-left: auto; margin-right: auto; float: none;" src="/sites/all/themes/br/assets/images/LNS-media-pack_survey-results-4.jpg" />
<img style="width: 45%; display: block; margin-left: auto; margin-right: auto; float: none;" src="/sites/all/themes/br/assets/images/LNS-media-pack_survey-results-5.jpg" />

Answer 3

I'm seeing that the browser is converting a line of code incorrectly:

<img 
style="width: 45%; display: block; margin-left: auto; margin-right: auto; float: none; 
src=" lns-media-pack_survey-results-3.jpg"="" images="" assets="" br="" themes="" all="" sites="">

There is

no terminating " for the style
a space in src="_lns ....