Question

第一篇文章，而且我对CSS的经验也不高。网站（http://www.passivhaustraining.co.uk/）正常运行了几年，但突然出现了一个显示问题（今天已通知我们）。

当我在Firefox中查看时，标题看起来像这样（预期的行为）： Header as viewed in Firefox

当我在Chrome中查看时，它看起来像这样（错误行为）： Header as viewed in Chrome

直到最近，该标头在Firefox和Chrome中均按预期显示。我已经在使用Chrome的Wayback Machine上检查了该站点，并且现在在Chrome中可以正常工作的历史站点捕获现在无法正确显示。这使我认为Chrome可能最近改变了它解释CSS代码的方式。

标头的HTML如下（不完整，因为我需要在样式部分添加更多CSS类。但是，包含有问题的ID。）：

<div class="hgroup full-container ">
<a href="http://www.passivhaustraining.co.uk/" title="Passivhaus Training" rel="home" class="logo"><img src="http://www.passivhaustraining.co.uk/wp-content/uploads/2017/08/Passivhaus-Training.svg"  class="logo-height-constrain"  alt="Passivhaus Training Logo"  /></a>
<div id="header-sidebar" class="no-logo-overlay">
<aside id="custom_html-6" class="widget_text widget widget_custom_html">
<div class="textwidget custom-html-widget">
<div style="display: inline-block;"><img src="http://www.passivhaustraining.co.uk/wp-content/uploads/2017/05/aecbcarbonlite-e1495805835211.png">
</div>
<div style="display: inline-block;">Managed by WARM: Low Energy Building Practice<br>
on behalf of Passivhaus Trainers and the AECB<br>
<br>
For any queries, contact WARM on:<br>
01752 542 546<br>
training @ peterwarm.co.uk<br>
</div>
</div>
</aside>
</div>
</div>
<style>
<!-- .hgroup.full-container -->
#masthead .hgroup #header-sidebar aside.widget {
  margin-bottom: 0;
  float: left;
  position: relative;
  margin-right: 25px;
</style>

缩小Chrome窗口，使其模仿小型笔记本电脑，平板电脑或手机的大小，这将绿色徽标和文本强制显示在主站点徽标下方，这与预期的一样。

非常感谢您的帮助。

利亚姆

Answer 1

我在Chrome上浏览了您的网站，看来组成标头的两个元素都向左浮动。

如果您使用此元素：

<aside id="custom_html-6" class="widget_text widget widget_custom_html">

并从其中删除float: left，标题将对其进行更正。看起来好像是通过您的style.css应用了它，但是如果由于某些原因而无法删除它，则可以使用以下命令覆盖它：

#masthead .hgroup #header-sidebar aside.widget#custom_html-6 {
    float: none;
}

CSS：div意外重叠

1 个答案: