Strange behaviour when using text-align justify/text-justify and right

Question

I ran into one IE-specific problem that I just can't wrap my head around.

The following HTML and CSS can be seen live in this pen.

:: HTML

<div id="container">
    <div class="dummy">Dummy</div>
    <nav>
        <div id="right">
            <ul>
                <li>Lorem ipsum <img src="http://placehold.it/80x40"> dolor sit amet.</li>
                <li>Anal natrach, ut vas petat, <img src="http://placehold.it/80x40"> doriel dienve.</li>
            </ul>
            <div class="dummy">Dummy</div>
            <div class="dummy">Dummy</div>
        </div>
    </nav>
</div>

:: CSS

/* RESET */
* { margin: 0; padding: 0; vertical-align: top; }
ul { list-style: none; }

/* MARKUP */
#container {
    line-height: 0;
    font-size: 0rem;
    text-align: justify;
    text-justify: distribute-all-lines;
}

#container:after {
    content: '';
    display: inline-block;
    width: 100%;
}

#container > * {
    display: inline-block;
    line-height: 1;
    font-size: 1rem;
    text-align: left;
    text-justify: none; /* does not work */
}

#container nav {
    text-align: right;
}

#right > * {
    display: inline-block;
}

/* COLORS & STUFF */
#container { padding: 10px;  background: #cfc; }
.dummy { padding: 10px; background: #ffc; }
#container nav { padding: 10px; background: #ccf; }
ul { padding: 10px; background: #fcc; }

So, what's the Problem?

The content of the green div is justified, while each child of the very div in turn is given text-align: left;. Those children are: the left dummy div and the bluish nav.

The nav contains a list (red), and two dummies. For the red list's items the text-align is set to right - and there's lies the problem (or at least, there you can see it).

The first image is shifted to the left (and thus overlays/hides some piece of the text). The second image (and thus the whole second list item) is fine. This, however, changes, when changing the text. It seems as if only the image of the longest (meaning widest) item stays where it should be - all other images (if you were to create some more items) are shifted - depending on the list item's width, that is.

Now, why is that so - and how can I fix it?

The following things I found out so far:

• When setting the li { text-align: left; } the image stays fine in between the two text portions - but I don't get right alignment, of course.
• When removing text-justify from the #container the image stays fine as well.
• Setting text-justify either to auto or to none does not seem to work...

Once again: this is just regarding Internet Explorer (9+).

// EDIT
In order to avoid your time being spent on something I'm not interested in, I'll post something more on what I'd like to have.

The final code must

• keep the current/desired functionality (i.e., justified alignment);
• work in all major browsers (current version and at least one before that).

The final code must not

• contain floats;
• contain absolute/relative positions.

// EDIT
Here is a screenshot of the desired result (Firefox), and one of what I get in IE...

Answer 1

Change your text-justify to distribute (Tested in IE10, IE9, Chrome, FF):

text-justify: distribute;

Check out the codepen to see it in action.

Answer 2

Did you try by setting like this?

li img{display: inline-block; margin: 0 5px;} /*you could set margin: 1px; only*/

your code pen