0

私は以前にもっと長い質問をしていましたが、これが最も簡単に見つけられると思いました。最初にページをロードすると、navigationBannerの一部のアイテムが移動します。しかし、テキストボックスに注文番号を入力すると、リロードされます...すべてが本来あるべき場所にあります。CSSがロードされるべきときにロードされていないと思いますが、htmlとcssに完全に精通していないため、完全にはわかりません。

誰かが私にこれを説明できますか？

これがナビゲーションバーの私のhtmlです

<div id="background"><img src="images/blue%20background.jpg" alt="background" width="100%" height="100%" /></div>
    <div id="header">
        <div id="navigationContainerWrap">
            <div id="navigationBanner">
                <a href="">
                    <img src="images/facebook.png" alt="Facebook Link" border="0" style="margin: 4px 0 5px 44px;" /></a>

                <a href="">
                    <img src="images/twitter-2.png" alt="Twitter Link" border="0" style="margin: 4px 0 5px 2px;" /></a>

                <a href="">
                    <img src="images/pinterest-icon.png" alt="Pinterest Link" border="0" style="margin: 4px 0 5px 2px;" /></a>

                <img src="images/txtNewCustomers.png" alt="New Customers txt" style="margin: 0px 0 5px 50px;" />

                <img src="images/txtExistingCustomers.png" alt="Existing Customers txt" style="margin: 0 0 5px 50px;" />

                <a href="">
                    <img src="images/email.png" alt="Email Link" border="0" style="margin: 4px 10px 6px 0;
                        float: left;" /></a>

                <p style="float: left;">
                    1.800.BLAH.BLAH</p>

                <a href="">
                    <img src="images/btnOrder.png" alt="New Customers Button" border="0" style="float: left;
                        margin: 0 0 0 45px;" /></a>

                <a href="">
                <img src="images/btnLogIn.png" alt="Log in Button" border="0" style="float: left;
                                margin: 0 10px 0px 25px;" /></


            <!-- Order tracking Form input -->    
                 <div class="trackingInput">
                    Order Status<br />
                    BloopBloop Order Number:<br /> 
                    <input id="txtOrderID" type="text" onkeydown="if (event.keyCode == 13) document.getElementById('btnOrder').click()" />
                <input type="button" id="btnOrder" value="Submit" onclick="return btnOrder_onclick()" />             
                </div>

</div>

私が信じているのは関連するCSSです

.trackingInput
{
    float: right;
    /*padding: 0 5px 0px 0;*/
    z-index: 35;
    font-weight: normal;
    font-family: "Century Gothic";
    height: 85px;
    margin-top: -45px;
    position: relative;
    margin-left: -1px;
    width: 178px;
}

#navigationBanner
{
    background-color: black;
    background-repeat: no-repeat;
    height: 85px;
    width: 600px;
    float: right;
    color: White;
    font-weight: bold;
    font-size: small;
}
#navigationContainerWrap
{
    background-position: center;
}
#header
{
    background-color: White;
    background-image: url(../Images/GenericLogo.png);
    width: 960px;
    height: 140px;
    background-repeat: no-repeat;
    margin: 0 auto;
    position: relative;
    z-index: 10;
}

前もって感謝します！そして、情報過多でごめんなさい。

4

1 に答える 1

1

可能性：

  1. 両方の時間で同じCSSを発行することはありません
  2. 両方の時間で同じHTMLを出力することはありません（たとえば、異なるタグやクラスを使用する場合）

Internet Explorerを使用してこれを追跡する1つの方法：

  1. IEに最初のページ（期待どおりに機能していないページ）をロードします
  2. F12キーを押して、開発者ツールを開きます
  3. 開発ツールの矢印アイコンをクリックして、選択モードに入ります
  4. 正しく表示されていないWebページの一部をクリックします
  5. （開発ツールの）[トレーススタイル]タブをクリックします
  6. スタイルツリーを調べて、各スタイルがどこから派生しているかを確認します
于 2012-08-03T17:08:13.940 に答える