Inconsistent list item marker positioning depending on child's display property

Question

Considering this markup:

<ul>
    <li>
        <div id="container">
            <button>toggle display</button>
            <div>text</div>
            <div>text</div>
        </div>
    </li>
</ul>

Assuming the #container element's computed CSS display value is block, the list item marker (the bullet •) is rendered beside the first line of the content (to the left of the <button>).

Now, if #container's display CSS property is changed to inline-block, the list item marker is rendered beside the last line of text. See this test case. (tested in Chrome 35 and Firefox 30).

Is is possible to render the item marker in the same place in both of these scenarios? (preferably in the place where it renders with the display: block container)

After some fiddling, the item marker position seems to be affected by the inline-block element's vertical-align. For example, setting vertical-align: top in the #container element will render the marker close to the top-left of the inline-block element, but there is still a discrepancy in the marker positioning as the vertical-align property does not apply to block elements.

Is there a solution to make the bullet render in the exact same spot independent of the #container's display property?

I would prefer a CSS-only solution, but editing the markup is also acceptable.

Answer 1

According to http://www.w3.org/TR/CSS21/visudet.html:

The baseline of an 'inline-table' is the baseline of the first row of the table.

The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge.

Also see these two demo:

http://www.brunildo.org/test/inline-block.html

http://www.brunildo.org/test/inline-block2.html

And it appears that block and inline-table have the same baseline. So use inline-table instead of inline-block would solve this.