css - div 仅在 Chrome 中且仅在主页上获得额外填充

Question

我们遇到了一个只影响 Chrome、Firefox 和 IE 的问题。

Chrome 中唯一受影响的页面是主页 index.html...所有其他页面都使用完全相同的标题 html 和 CSS。如果我们点击主页上的链接进入内部页面，页面工作正常，然后我们点击回到主页，看起来还不错……但是如果我们刷新主页，它又乱了。

这是网址

http://www.logilityconnectionseurope.com

被压下的元素是一个大的div，右边放着一张图片和一些文字，div CSS如下

.dateLogoTopDiv  {
float:right;
text-align:right;
margin-top: 15px;
}

HTML:

<div class="header">

    <img src="images/connections-europe-2013-logo-web.jpg" width="410" height="242" alt="connections europe 2013 logo" />

    <div class="dateLogoTopDiv">
        <img src="images/logility-logo.jpg" width="105" height="108" alt="logility logo" />
        <p>14-15 May 2013</p>
        <p>Hotel Le Plaza </p>
        <p>Brussels, Belgium</p>
     </div>

</div>

正如我所说，在 Firefox 和 IE 中工作正常，在除索引之外的每个页面上在 Chrome 中工作

任何帮助将不胜感激

Answer 1

通过 HTML 验证器运行您的页面并修复所有错误。如果没有有效的 HTML，浏览器将无法确定您打算显示什么，并且您将遇到跨浏览器呈现不一致的情况。在这种情况下，Webkit 浏览器(Chrome 和 Safari)。

http://validator.w3.org/

编辑:

OP 的网站之前包含格式错误的 HTML，包括开放标签和放错位置的标签。 OP 的站点已被修复，使问题中发布的 URL 上的代码已过时。

编辑 2:

我在 Chrome 中看到了 OP 的问题。我无法解释问题发生的原因或间歇性的原因。但是，我通过添加以下内容修复了它...

额外的 CSS:

.header {
    overflow: auto;
}

.header > img {
    float: left;
}

现有的 HTML:

<div class="header">

    <img src="images/connections-europe-2013-logo-web.jpg" width="410" height="242" alt="connections europe 2013 logo" />

    <div class="dateLogoTopDiv">
        <img src="images/logility-logo.jpg" width="105" height="108" alt="logility logo" />
        <p>14-15 May 2013</p>
        <p>Hotel Le Plaza </p>
        <p>Brussels, Belgium</p>
     </div>

</div>

这需要两个主要的标题元素并分别向左和向右浮动。右边的已经飘到了右边。 overflow: auto; 是一种强制 header 扩展以包含其 float 元素的技巧。由于两者都是 float 的，它们在常规内容流之外，通常不会导致 header 扩展。