0

Chrome、Firefox、IEにのみ影響する問題があります。

Chromeで影響を受ける唯一のページはホームページindex.htmlです...他のすべてのページはまったく同じヘッダーhtmlとCSSを使用します。ホームページのリンクをクリックして内部ページに移動すると、ページは正常に機能し、次にホームページに戻ってクリックすると正常に表示されます...しかし、ホームページを更新すると、再び混乱します。

これがURLです

http://www.logilityconnectionseurope.com

押し下げられる要素は、右側に画像とテキストを保持する大きなdivです。divCSSは次のとおりです。

.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で動作します

助けていただければ幸いです

4

1 に答える 1

0

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>

これにより、2つの主要なヘッダー要素が取得され、それぞれ左右にフロートされます。右のものはすでに右に浮かんでいました。 overflow: auto;ヘッダーを強制的に展開して、浮動要素を含めるためのトリックです。どちらもフロートしているため、通常のコンテンツフローの範囲外であり、通常はヘッダーが拡張されません。

于 2012-12-20T16:48:25.913 に答える