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>

Annnnd 我认为是相关的 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. 在 IE 中加载您的第一页（未按预期工作的页面）
  2. 按 F12 打开开发者工具
  3. 点击开发者工具中的箭头图标进入选择模式
  4. 单击网页中未正确显示的部分
  5. 单击 Trace Styles 选项卡（在开发人员工具中）
  6. 探索样式树以查看每种样式的来源
于 2012-08-03T17:08:13.940 回答