CSS：网站徽标未出现在IE11中

我的网站在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。有点乱，但更好。有些事情无法真正解决，所以我在我的原创作品中丢失了一些细节。对于那些使用IE的人来说，成本总是很高的，不是吗。无论如何，这里有一些答案。具体来说，我在由提供的头文件中添加了一个脚本。然后我就修改了CSS。有点乱，但更好。有些事情无法真正解决，所以我在我的原创作品中丢失了一些细节。使用IE的人的成本

#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; }