Inconsistency for displaying <li><img /></li>

Question

I have a problem with very simple HTML markup, which is rendered different in Chrome and Firefox. I'm wondering whether it is a bug in one of them.

The code is as simple as:

<ul>
    <li>
        <img />
    </li>
</ul>

The problem is that in Chrome the <li /> element has some padding at the top, but only if its content is an image. There is no problem with e.g. text.

Example fiddle: https://jsfiddle.net/8c4rujvu/1/

img {
  display: block;
  width: 500px;
}
li {
  border: 1px solid #f00;
}

<ul>
  <li>
    <img src="http://www.w3schools.com/css/trolltunga.jpg">
  </li>
  <li>
    <img src="http://www.w3schools.com/css/trolltunga.jpg">
  </li>
  <li>Some text</li>
</ul>

This is how it displays in Firefox (50.0.2):

And in Chrome (55.0.2883.75 m):

What seems to be a problem here?

Answer 1

This issue can simply fix float:left property too , check this fiddle

https://jsfiddle.net/9wp619xz/

check with the bug details Fixing Google Chrome compatibility bugs in websites - FAQ

https://www.chromium.org/Home/chromecompatfaq

img {
  float:left;
  width: 500px;
}
li {
  border: 1px solid #f00;
  float:left;
  width:100%;
}

<ul>
  <li>
    <img src="http://www.w3schools.com/css/trolltunga.jpg">
  </li>
  <li>
    <img src="http://www.w3schools.com/css/trolltunga.jpg">
  </li>
  <li>Some text</li>
</ul>

Answer 2

This is due the default browser / user agent styling difference for display: list-item.

As a fix, you can use inline-block and vertical-align:top (or even just vertical-align: top) for the img to get common behaviour - see demo below:

img {
  display: inline-block;
  vertical-align: top;
  width: 500px;
}
li {
  border: 1px solid #f00;
}

<ul>
  <li>
    <img src="http://www.w3schools.com/css/trolltunga.jpg">
  </li>
  <li>
    <img src="http://www.w3schools.com/css/trolltunga.jpg">
  </li>
  <li>
    Some text
  </li>
</ul>

A related question you may want to look at: Why alignment mark list is different on WebKit when using :before height?

Why this happens?

Given that other browsers do not agree with chrome on this, this clearly looks like a bug and it is. See this open bug documented in Chromium Bug Tracker:

Table inside list item rendered at wrong position(Example URL: http://jsfiddle.net/P8Ua7/)

See excerpts from one of the comments in the bug:

Not limited to tables. Putting a flexbox inside a list-item gives the same result. It also happens if you have replaced content displayed as block.

The OP has an image (which is an inline replaced element) displayed as block!

Here is another bug you may want to check out.