Question

我的页面在第一次加载时呈现错误（不是我想要的），然后在刷新时是正确的。它与＆＃34; display：inline-block＆＃34;有关。我认为。我已经做了很多研究，但我似乎无法想出这一点。是的....我在加载之前已经清除了我的缓存，我得到了相同的结果。

首次加载： enter image description here

刷新后

： enter image description here

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
    <body>

        <div id="header">
            <div id="ribbon-start"></div>
            <div id="ribbon-shade"></div>
            <div id="banner">   
                <div id="titles">
                    <div id="name">The Person</div>
                    <div id="profession">Their Profession</div>
                </div>
                <div class="tip"></div>
                <div class="nav-butts">
                        <div class="circle"></div>
                        <div class="circle"></div>
                        <div class="circle"></div>
                </div>
            </div>
        </div> <!-- header -->

        <div style="height:900px; width:1px"></div><!-- SCROLL TEST -->

        <div id="footer">
            <div id="toTop">^</div>
        </div> <!-- footer -->

        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/jqueryeasing.js"></script>
        <script type="text/javascript" src="js/sticky.js"></script>
        <script type="text/javascript" src="js/behaviour.js"></script>

    </body>
</html>

和CSS

body{
background-color:#00FFFF;
}
#ribbon-start{
z-index:-2;
position:absolute;
top:10px;
left:0px;
width:49px;
height:100px;
background-color:#181818 ;
}
#ribbon-shade{
z-index:-1;
position:absolute;
top:10px;
left:25px;
width: 0; 
height: 0; 
border-top: 11px solid transparent;
border-bottom: 10px solid transparent; 
border-right:24px solid  #909090   ; 
}
#banner{

margin:21px 0 0 17px;
width:90%;
height:100px;
background-color:black ;
-webkit-box-shadow: -6px -4px 17px rgba(0, 0, 0, 0.75);
-moz-box-shadow:    -6px -4px 17px rgba(0, 0, 0, 0.75);
box-shadow:         -6px -4px 17px rgba(0, 0, 0, 0.75);
}
#titles{
    display:inline-block;
}
#name{
margin: 0 0 0 80px;
font-size:84px;
font-family: 'RalewayLight', sans-serif;
color: white;
display:inline-block;
}
#profession{
margin: 0 0 0 10px;
font-size:34px;
font-family: 'RalewayLight', sans-serif;
color: white;
display:inline-block;
}
#banner .tip{
display:inline-block;
margin: 0 -49px 0 0;
float:right;
width: 0; 
height: 0; 
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 50px solid black;
}
.nav{
margin:0 0 0 17px;
width:90%;
height:100px;
}
.nav-butts{
display:inline-block;
padding:8px 8px 8px 8px;
background-color:black;
border-radius:38px;
margin:8px 0 0 0;
float:right;

}
.circle{
margin:5px 8px 0 8px;
display:inline-block;
height:60px;
width:60px;
background-color:white;
border-radius:30px;
}
.sticky {  
margin-top:10px;
position: fixed;    
left:-8px;
top:-8px;  
z-index: 100;  
border-top: 0;  
} 
.sticky .nav-butts{
-webkit-box-shadow: 0px -2px 30px rgba(0, 0, 0, 0.75);
-moz-box-shadow:    0px -2px 30px rgba(0, 0, 0, 0.75);
box-shadow:         0px -2px 30px rgba(0, 0, 0, 0.75);
}
#toTop{
position:fixed;
text-align:center;
left:10%;
bottom:-15px;
height:60px;
width:70px;
font-size:64px;
background-color:black;
font-family: 'RalewayThin', sans-serif;
color: white;
border-radius:20px;
cursor:pointer;
}
@font-face
{
font-family: RalewayBold;
src: url('fonts/Raleway-Bold.otf');
}
@font-face
{
font-family: RalewayLight;
src: url('fonts/Raleway-light.otf');
}

Answer 1

第一次加载时它对我很好。我过去使用过php，发现第一次加载时会出现错误，但第二次加载时会出现错误。试试不同的浏览器人们可能只是在表现。

Answer 2

我已经加入了这一行

<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">

这可以解决问题但不是这个问题的答案。这段代码让浏览器调用样式，而不是每次加载使用缓存的样式，我相信。

CSS在第一页加载时不显示内联

2 个答案: