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的人的费用。

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

1 个答案: