CSS: логотип сайта не отображается в IE11

Question

Мой сайт отлично отображает Firefox и Chrome. Однако в IE11 логотип не отображается в настольной версии, а в мобильной версии. Значит, должно быть что-то делать с CSS?

У меня есть это в моем header.php:

<!-- LOGO BLOCK STARTS HERE --> 
<div id="logo"> 
<div align="center"><a href="<?php echo esc_url(home_url('/')); ?>" rel="home"><hr class="stylelogo"></a><br /> 
<span class="current-date">Mywebsite.com | <?php echo date_i18n('j F Y', time()); ?></span> 
</div><!-- end #logo --> 
    </div> 
<!-- MOBILE LOGO BLOCK STARTS HERE --> 
    <div id="mobilelogo"> 
<div align="center"><a href="<?php echo esc_url(home_url('/')); ?>" rel="home"><img src="http://mywebsite.com/wp-content/uploads/logo.png"></a><br /> 
<span class="current-date">Mywebsite.com | <?php echo date_i18n('j F Y', time()); ?></span> 
</div></div><!-- end #mobilelogo --> 
<!-- LOGO BLOCK ENDS HERE --><br /> 

и это в моем CSS:

#masthead { 
    display: block; 
    float: none; 
    margin: 0 auto !important; 
} 
#mobilelogo {display:none;} 

@media all and (max-width: 32.5em) { 
#logo {display: none; } 
#mobilelogo{display:block;} 
} 

hr.stylelogo { 
    border: 0; 
    height: 1px; 
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0)); 
    box-sizing: content-box; 
    margin-bottom: 1.5em; 
} 
hr.stylelogo:after { 
    content: url(http://mywebsite.com/wp-content/uploads/logo.png); 
    display: inline-block; 
    position: relative; 
    top: -14px; 
    padding: 0 10px; 
    background: #ffffff; 
    color: #8c8b8b; 
    font-size: 16px; } 

Итак, что случилось?

Answer 1

Итак, это всегда зануда, не так ли. Во всяком случае, здесь были некоторые ответы. В частности, я добавил скрипт в файл заголовка, любезно предоставленный Marko Kazhich. Затем я просто переделал CSS. Немного беспорядка, но это лучше. Некоторые вещи не могли реально разрешить, поэтому я потерял немного тонкостей в своем оригинале. Стоимость для тех, кто использует IE.