1

サイトの 1 つの div で奇妙な問題が発生しています。ページが最初に読み込まれるとき、この特定の div (以下のコードの id=header_logo) は、予想よりも約 100 ピクセル低くなります。ただし、ページが更新されると、div は本来あるべき場所(ページの上部近く) に戻ります。実際、ページが更新されるたびに、div が正しい位置に表示されます。問題が発生するのは、タブ/ページを閉じて再度開いたとき、または初めて開いたときだけです。この問題は、Chrome や Safari などの WebKit ベースのブラウザーに限定されているようです。Firefox は正常にレンダリングされますが、奇妙なことに、IE も同様です。

問題発生時のスクリーンショット

ここにHTML

<div id="user_bar">
    </div>

    <div id="main_window">

        <div id="header" class=".gradient">
            <div id="header_text">
                <h1>Lab Connect</h1>
                <h3>Lab Resource Aggregator</h3>
            </div>

            <div id="header_logo">
                <a href="index.html">
                    <img src="./graphics/SS_Comm_labs.png" height="85" width="420" />
                </a>
            </div>
        </div>

ここにCSSがあります

body {
    background-image: url('../graphics/tactile_noise.png');
    background-repeat:repeat;
    /*background-color:#e7e8ed;*/
    font-family:helvetica;
    margin: 0%;
}

#user_bar {
    height:40px;
    background-color:#38393b;

}

#main_window {
    width:1200px;
    background-color:white;
    box-shadow:0px 5px 15px black;
    margin: 0px auto;
}

#header {
    height: 125px;
    background: #ffc578; /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmYzU3OCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmNzk0MjIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top,  #ffc578 0%, #f79422 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffc578), color-stop(100%,#f79422)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #ffc578 0%,#f79422 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #ffc578 0%,#f79422 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #ffc578 0%,#f79422 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #ffc578 0%,#f79422 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffc578', endColorstr='#f79422',GradientType=0 ); /* IE6-8 */
    padding-bottom: 10px;
}

#header_text {
    margin-top: 15px;
    margin-left: 15px;
    color: white;
    display: inline-block;

}

h1 {
    margin: 0%;
}

h3 {
    margin: 0%;
}

#header_logo {
    width: 500px;
    height:110px;
    float:right;
    display:inline-block;
    background-color: white;
    border-bottom: .75px solid #FFA366;
    border-left: .755px solid #FFA366;
    border-bottom-left-radius: 25px;
    box-shadow: 2px -2px 10px #222222 inset;
}

#header_logo img {
    margin-left: 45px;
    margin-top: 5px;
}

要素が壊れたときに Chrome で要素を調べましたが、計算されたスタイルでこのように押し下げるものは何も見当たりませんでした。

前もって感謝します

4

2 に答える 2

1

divの幅を指定していないため、#header_textフローティングされていません。ブロックレベルの要素がフローティングされておらず、コンテンツがあり、幅が指定されていない場合、デフォルトでコンテナーの 100% を占有します。

したがって、解決策は、display:inline-blockスタイルを破棄して (何にも影響しないため)、 に追加float:leftする#header_textことです。これで完了です! さらに、幅を指定することもできます (必須ではありません) #header_text。

ドキュメント フローから div を削除する方がよいと思われる場合は、Chad von nau のソリューションが最適です。

于 2013-08-15T03:11:34.280 に答える
0

フロートは少し扱いに​​くい場合があります。このタスクには絶対配置を使用することをお勧めします。これらの css プロパティは、ヘッダーをポジショニング コンテナー ボックスとして設定し、ヘッダー ロゴをそのボックスの右上に配置するように設定します。

#header {
  position: relative;
}
#header_logo {
  position: absolute;
  top: 0;
  right: 0;
}
于 2013-08-15T03:03:29.247 に答える