Internet Explorer incorrectly positions inline block content inside a flex container. The element gets positioned but its content does not. Here is an example:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Microsoft Internet Explorer incorrectly handles display flex</title>
<style>
.C {
display: flex; flex-direction: row
}
.I {
position: relative;
}
.L {
position: relative;
left: 1.5em;
border: solid red thin
}
.L span {
display: inline-block;
}
</style>
</head>
<body>
<div class="C"><div><p>[</div><div>
<p><span class="I">
<span class="L">
<span>*</span></span>
</span ></div><div><p>]</div></div>
</body>
</html>
