Использование сервера IE11 - Округленные границы не отображаются?

Question

Я создаю веб-страницу, которая находится внутри другой веб-страницы (например, интрасети), документ сидит и запускается с нашего сервера, который запускает Internet Explorer 11. Может ли кто-нибудь сказать мне, почему некоторые элементы дизайна не отображаются? (особенно кривые)

JS Fiddle: https://jsfiddle.net/kt4hs1pk/

Я поставил это в начале, который дал мне самое близкое сходство, что я хочу:

<!--[if IE]> 
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
<![endif]--> 
<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=11; IE=6" /> 

HTML

<div id="content"> 
<section id="mainContent"> 
<h2> Header </h2> 
<div class="boxed"> 
<h3>time and date</h3> 
<h4> <img src=" alt=""; style="float:left; padding-right:1%; padding-left:1%"/>main content.</h4> 
<br> 
<footer> 
    <article> 
    <h5><div style="color:black; background-color:#B9D4F4">Links</div></h5> 
    <p>footer text <br> 
     <br> 
    footer text </p> 
    </article> 
    </footer> 
</div> 
    <div id="footerbar"><!-- Small footerbar at the bottom --></div> 
    </div> 

</section> 

css

@charset "utf-8"; 
#content #mainContent h2 { 
    /* Blog Header */ 

    background-color:#fff; 
    width:auto; 
    text-indent:3%; 
    text-decoration:none; 
    font:antic; 
    font-weight:100; 


} 
#content #mainContent h3 { 
    /*Date and Name */ 
    margin-left:10px; 
    font:antic; 
    width:auto; 
    font-size:14px; 
    font-weight:100; 
    color: #D6D6D6; 


} 
#content #mainContent h4 { 
    /* All paragraphs under maincontent */ 
    margin-left:10px; 
    font:antic; 
    font-weight:100; 
    color:#195DAD 


} 

footer article { 
    /* Footer articles */ 
    width: 100%; 
    float: left; 
    padding-left: 2%; 
    padding-top: 1%; 
    padding-right: 2%; 
    text-align: center; 
    font-family: antic; 
    font-style: normal; 
    font-weight: 200; 
    color: rgba(146,146,146,1.00); 
    font-size:14px 

} 
footer article h5 { 
    /* Footer article titles */ 
    text-align: center; 
    font-family: antic; 
    font-style: normal; 
    font-weight: 400; 
    font-size:16px; 
    width:10%; 
    margin-left:auto; 
    margin-right:auto; 
    border-radius:20px 20px 20px 20px; 
    border-style:dotted; 

} 
#mainContent { 
    /* Container for the blog post in individal blog view */ 
    padding-left: 2%; 
    width: auto; 
    float: left; 
    padding-right: 2%; 
    padding-top: 41px; 
    margin-left:150px; 
    max-width:60%; 
    border-style: groove; 
    border-top-style:none; 
    border-color: #C6D9EF; 
    border-width:1px; 
    border-radius: 8px; 
    } 

#mainwrapper { 
    /* Container of all content */ 
    width: 70%; 
    overflow: auto; 
    margin-left: 5%; 

} 

#footerbar { 
    /* Footer bar at the bottom of the page */ 
    height: 18px; 
    clear: both; 
    background-color: rgba(185,212,244,1.00); 
    width: 100%; 

} 
footer { 
    /* Container for footer artices */ 
    width: 100%; 
    padding-left: 2%; 
    padding-right: 2%; 
} 





#mainContent { 
    /* Container for the blog post */ 
    padding-top: 0px; 
    float: none; 
    width: 96%; 
} 


footer { 
    /* Footer region */ 
    width: 96%; 
    padding-left: 2%; 
    padding-right: 2%; 
} 
#content footer article { 
    /*Each footer article */ 
    width: 100%; 
} 
#mainwrapper header { 
    /* Header */ 
    width: 100%; 
} 

#mainwrapper header nav { 
    /*navigation links in header */ 
    text-align: center; 
    background-color: #195DAD; 
    width: 98%; 
} 


#mainwrapper #content #sidebar { 
    /* sidebar */ 
    padding-bottom: 0px; 
} 


#content footer article { 
    /* Each foter article */ 
    width: 96%; 
} 

Может ли кто-нибудь помочь?

Answer 1

Выключает веб-сайт, это происходит в играх в iframe. Я придумал альтернативы.