Question

我实际上之前有一个更长的问题，但我认为这将是最容易找到的问题。当我最初加载我的页面时，navigationBanner中的一些项目会被取代。但是在我在文本框中输入一个订单号并重新加载后......一切都应该在那里。我假设我的CSS没有加载它应该是，但我不完全确定因为我完全在html和CSS的noobish。

有人能解释一下吗？

这是导航栏的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;
}

提前致谢！抱歉信息超载。

Answer 1

的可能性：

两次都不会发出相同的CSS
您不会同时发出相同的HTML（例如，您使用不同的标记和/或类）

使用Internet Explorer跟踪此问题的一种方法：

在IE
点击F12打开开发者工具
单击开发人员工具中的箭头图标以进入选择模式
点击您网页上未正确显示的部分
单击“跟踪样式”选项卡（在“开发人员工具”中）
浏览样式树以查看每个样式的派生位置

CSS最初没有加载

1 个答案: