3

私は私を夢中にさせている異常な問題を抱えています! この正確な問題に関連する質問がまだ投稿されていません。

サイトに、ランダムなページの読み込み時に特定の要素が正しくレンダリングされないページがあります。たとえば、クロムを使用すると、ページは正常にレンダリングされますが、何度か更新すると、ヘッダーの基本的な ul が本文に移動します。カルーセルが表示されない場合や、ナビゲーション ブロックが次の行にスライドする場合があります。Firefox でもこの動作を再現しました。

問題の原因がどこにあるのかわからないため、誰もが見られるようにコードのスニペットを提供することはできません。問題のあるページは www.Calibrus.com のインデックスです。本当に驚くべきことは、Chrome Dev Tools を使用することで、display:none を間違った ul に設定してから、display を通常に戻すと、ul が本来あるべき場所にレンダリングされることです。これは、まったく同じ html と css が何らかの形で異なる方法でレンダリングされていることを示唆しています (使用されているスクリプトに関係なく)。

また、これはサーバーの問題ではありません。コードをローカルで実行するときにも同じ問題があります。

ここで何が起こっているのか誰にも分かりませんか？

4

1 に答える 1

2

この問題はフロートとスライドショーの JavaScript に関係していると思います。

ライブ サイトでレイアウト バグが発生するたびに、最初のスライドが正しくレンダリングされませんでした。これにより、前述のフロート バグを悪化させるように見える<div id="r1">高さが発生します。浮かんでいるもの0とそうでないものの間には、いくらかの緊張があるようです。<ul><a>

これは私のために働いた解決策です：

クラス (または必要に応じて ID )index.htmlを追加して、CSS 内のリンクをターゲットにできるようにします。この例では、単純に次のクラスを指定していますlogo。

<a class="logo" href="index.html">
  <img src="images/Calibrus_logo.png" alt="logo" border="0">
</a>

次に、CSS で次のようにします。

// target the link using your chosen selector
.logo {
  display: block;
  float: left;
}

これらのルールを追加すると、レンダリングのバグを再現できなくなりました。

サイドノート：

<head>で開始タグの直後に文字エンコーディングを宣言することをお勧めします<meta charset="utf-8">。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Calibrus</title>

また、border画像の属性は廃止されました。そうではなく：

<img src="images/Calibrus_logo.png" alt="logo" border="0">

<img>を CSS でターゲットにして、次のように宣言するだけです。

.logo img {
  border: none;
}
于 2013-07-07T02:06:03.097 に答える