IE11 not rendering CSS properly
<p>Chrome and Opera render my page properly without issue, however IE11 and Edge do not.</p>

<p>I am using pure CSS to expand/collapse 3 section headings. It was my understanding IE 11 had more support for CSS3/webkit and I definitely thought Edge would of stepped up it's game.</p>

<p><a href="https://jsfiddle.net/x0c5fsqh/" rel="nofollow noreferrer">https://jsfiddle.net/x0c5fsqh/</a></p>

<p><strong>CSS Snippet</strong></p>

<pre><code>summary::-webkit-details-marker {
    background: url(/images/toggle-expand.png) center no-repeat;
    color: transparent;
    font-size: 125%;
    margin-right: 2px;
}
details[open] summary::-webkit-details-marker {
    background: url(/images/toggle.png) center no-repeat;
    color: transparent;
}
summary:focus {
    outline-style: none;
}
article &gt; details &gt; summary {
    font-size: 28px;
    margin-top: 16px;
}
details &gt; p {
    margin-left: 24px;
}
details details {
    margin-left: 36px;
}
details details summary {
    font-size: 16px;
}
</code></pre>

<p><strong>Rendered Properly</strong></p>

<p><a href="https://i.stack.imgur.com/0NbxP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0NbxP.png" alt="enter image description here"></a></p>

<p><strong>How IE/Edge renders it</strong></p>

<p><a href="https://i.stack.imgur.com/HTwvh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HTwvh.png" alt="enter image description here"></a></p>

<p>All of the headings overlap in to the content of the previous sections that should be hidden and the toggle images do not appear at all. Just looks like the above CSS is completely ignored.</p>

<p>Any ideas?</p>