HTML元素继续页面重新加载 - 仅限Chrome？

时间：2014-08-17 22:53:40

标签： html css google-chrome css-float

我遇到一些麻烦，在页面刷新时偶尔会不正确地显示某些浮动元素。此行为仅记录在Chrome（36.0.1985.143m）和Steam浏览器中。在Mac OS X 10.9.4，Mac OS X 10.7，Mac OS X 10.6.8和Windows 7上会出现此问题。

测试包括Mac OS X 10.9.4上的Safari 7.0.6，Mac OS X 10.7上的Safari 7.0.6，Mac OS X 10.6.8上的Firefox 3.6.10，Safari 5.1.10 Mac OS X 10.6.8， Windows 31上的Firefox 31，Windows 7上的IE11，Windows 7上的IE9。

我在Windows Server 2008 R2上通过IIS 7.5运行ColdFusion 9.0.2。但是，目前在此页面（或任何其他相关资源）上完成了ZERO服务器端脚本。 更新：目前正在使用服务器端脚本根据查询字符串中的section参数显示或隐藏div。就是这样。

这是我演示的链接。对于那些喜欢来源的人来说，它就在下面。 http://craftdeck.com/mockup2/profile.cfm?section=Store

这是呈现的HTML。 

<!DOCTYPE html>
<html>
  <head>
    <title>Craft Deck</title>
    <script type="text/javascript" src="scripts/jquery-1.10.0.min.js"></script>
    <script type="text/javascript" src="scripts/profile.js"></script>
    <script type="text/javascript" src="scripts/froogaloop.min.js"></script>
    <link type="text/css" rel="stylesheet" href="css/profile.css" />
    <link type="text/css" rel="stylesheet" href="css/fonts.css" />
    <link type="text/css" rel="stylesheet" href="css/modal.css" />
    <link rel="icon" type="image/png" href="images/favicon.png">
  </head>
  <body>
    <div id="header">
      <div id="userFunctions">
        <div id="logo">
          &nbsp;
        </div>
        <div id="functions">
            <span>
              Create Account
            </span>
            <span>
              Login
            </span>
            <span>
              About
            </span>
            <span>
              Contact
            </span>
        </div>
      </div>
      <span style="clear:both; height:0; line-height:0;">&nbsp;</span>
      <div id="profileHeader">
        <div id="displayImage">&nbsp;</div>
        <div id="verifiedID">
          <span class="title">Verified Identification</span>
          <span class="idType">
            <img alt="Checkmark" src="images/VerifiedIDCheckmark.png" /><span>Email</span>
            <img alt="Checkmark" src="images/VerifiedIDCheckmark.png" /><span>Facebook</span>
            <img alt="RedX" src="images/VerifiedIDX.png" /><span>Twitter</span>
            <img alt="OnlineDot" src="images/VerifiedIDOnline.png" /><span>Online</span>
          </span>
        </div>
        <div id="bannerText">Lorem ipsum dolor sit amet, consectetur adipiscing elit.         Nullam in lacus neque. Proin eget sapien quis odio pulvinar adipiscing non eget odio. Nam     congue iaculis congue. Mauris volutpat elit adipiscing velit consectetur iaculis. In aliquam ipsum risus, a luctus dolor ullamcorper eget. Proin in pulvinar sapien. Nam diam ipsum, malesuada aliquam est et, vestibulum bibendum sapien. Ut congue enim magna, ac pretium tellus cursus vel.

Aenean non molestie nisi. Fusce et massa eu felis faucibus molestie vitae a enim. Pellentesque convallis, nunc ut facilisis adipiscing, dui libero dignissim dui, at mattis ipsum mauris vel mauris. Vestibulum quis nibh id nibh luctus dictum et in augue. Pellentesque suscipit fringilla ipsum. Vestibulum ac dictum nisl. Suspendisse id bibendum lacus. Aliquam non ligula ornare, mollis nulla vel, tincidunt augue.
        </div>
      </div>
    </div>
    <div style="clear:both;">&nbsp;</div> 
    <div id="content">
      <div id="navigation">
        <span class="navButton">Store</span>
        <span class="navButton">Reviews</span>
        <span class="navButton" style="border:0 !important;">Chat</span>
      </div>
    </div>
  </body>
</html>

这是我的CSS 

body {
  background-color:#F1F2F2;
  margin:0;
  padding:0;
  font-family:'Open Sans',Verdana, Geneva, Arial, Helvetica, sans-serif;
  font-size:12px;
  line-height:15px;
  width:100%;
  height:auto;
  outline:none;
  color:#404041;
}
div {
  width:100%;
  height:auto;
}
#profileHeader {
  background-color:#D1D3D4;
  width:960px;
  margin:0 auto;
  height:175px;
  font-size:12px;
}
#userFunctions {
  width:960px;
  height:50px;
  margin:0 auto;
}
#userFunctions span {
  cursor:pointer;
}
#logo {
  margin-top:10px;
  width:50%;
  float:left;
  height:100%;
  background-image:url('../images/Logo-Orange.png');
  background-position:top left;
  background-repeat:no-repeat;
}
#functions {
  width:auto;
  float:right;
  text-align:right;
  height:30px;
  line-height:30px;
}
#functions span {
  margin-left:16px;
  margin-right:4px;
  text-transform:uppercase;
  font-size:12px;
}
#profileHeader div {
  display:inline-block;
}
#displayImage {
  width:175px;
  height:175px;
  margin-right:2px;
  background-image:url('../images/axe-guy.jpg');
  border-right-width:2px;
  border-right-style:solid;
  border-right-color:#F1F2F2;
}
#bannerText {
  width:570px;
  height:155px;
  display:inline-block;
  float:right;
  padding-left:20px;
  padding-top:20px;
  padding-right:20px;
  border-right:2px solid #F1F2F2;
}
#verifiedID {
  width:165px;
  height:175px;
  float:right;
  display:inline-block;
  font-size:14px;
}
#verifiedID .title {
  height:30px;
  width:165px;
  display:inline-block;
  padding-left:15px;
  line-height:30px;
  border-bottom:2px solid #F1F2F2;
}
#verifiedID .idType {
  width:165px;
  height:143px;
  display:inline-block;
  padding:5px 0 0 5px;
  line-height:22px;
  font-size:13px;
}
#verifiedID .idType img {
  vertical-align:middle;
  display:block;
  float:left;
}
#verifiedID .idType span {
  float:left;
  margin-bottom:12px;
  width:138px;
  text-indent:5px;
  display:inline;
}
#idTypes {
  width:165px;
  height:130px;
  float:right;
  display:inline-block;
  font-size:13px;
}
#navigation {
  width:960px;
  height:30px;
  background-color:#F15A29;
  margin:0 auto;
}
.navButton {
  color:#FFF;
  font-size:13px;
  display:inline-block;
  width:316px;
  height:30px;
  line-height:30px;
  text-align:center;
  border-right:2px solid #F1F2F2;
}
.navButton .active {
  background-color:#939598;
}
/*#headerPadding {
  background-color:#E9E9E9;
  height:20px;
}    
#bannerImage {
  width:960px;
  background-image:url('../images/Creative-People.png');
  background-size:100%;
  height:100px;
  margin:110px auto 71px;
}
#searchForm * {
  outline:none;
  border:0;
}
#searchForm input,select {
  margin:0 12px;
  background-color:#FFF; 
  height:36px; 
  font-family:'Open Sans';
  text-align:left;
  text-indent:10px;
  color:#999;
  width:189px;
}
#searchForm select {
  height:38px;
  padding:0;
  border:0;
  border-radius:0;
  -webkit-border-radius:0;
  -webkit-appearance: none;
  -moz-appearance: none;
  text-indent:10px;
}
#searchForm #searchSubmit {
  width:93px;
  height:40px;
  border:1px #FFF solid;
  background-color:#F05A28;
  color:#FFF;
  text-align:center;
  text-indent:0;
  cursor:pointer;
}
#content {
  background:#F1F2F2;
  width:100%;
  height:1090px;
  margin-bottom:10px;
  padding-top:20px;
}
#search {
  width:960px;
  margin:0 auto;
  height:26px;
  text-align:center;
}
#searchResults {
  width:960px;
  margin:0 auto;
  overflow:hidden;
}
.listing {
  width:320px;
  height:212px;
  float:left;
  background-image:url('../images/craftdeck_default_item_1.png');
}
.listing img {
  opacity:0.3;
}
.listing .pricetag {
  height:53px;
  width:123px;
  display:block;
  opacity:0;
  position:relative;
  background-image:url('../images/Pricetag-Full.png');
  bottom:212px;
  left:193px;
  font-size:20px;
  font-weight:normal;
  line-height:53px;
  text-indent:35px;
}
.listing .socialMedia {
  width:84px;
  height:27px;
  display:block;
  opacity:0;
  bottom:87px;
  left:3px;
  -webkit-border-radius:4px;
  border-radius:4px;
  -moz-border-radius:4px;
  -o-border-radius:4px;
  background-color:#FFF;
  position:relative;
}
.listing .socialMedia img {
  opacity:1;
  cursor:pointer;
}
#playVideo {
  cursor:pointer;
}
#filters {
  width:30px;
  height:424px;
  background-color:#6D6E70;
  background-color:rgba(167,169,171,0.8);
  position:relative;
  left:290px;
  bottom:295px;
  z-index:1000;
}
#filters img {
  cursor:pointer;
}
#viewMore {
  width:126px;
  height:31px;
  margin:0 auto;
  border-radius:0;
  border-bottom-right-radius:13px;
  border-bottom-left-radius:13px;
  background-color:#D1D2D4;
  font-size:14px;
  line-height:31px;
  text-align:center;
  cursor:pointer;
}*/

更新

我已对模型进行了一些更新，因为我们需要尽快推进这项工作！我已经确定在使用“商店”，“评论”和“聊天”导航按钮在个人资料的各个部分之间导航时，错误发生得更频繁。

UPDATE2：

我现在已经安装了一个修改版本（用于HTML5文档）Eric Meyer的CSS重置到profile.css文件中。然而，bug的状态没有变化。

UPDATE3：

正如下面评论中的括号所指出的，嵌入式CSS没有这个问题。我已经在head标记中包含了HTML注释版本的样式表。如果这是取消注释并且删除了外部样式表的链接，则此错误不再发生......有趣。

UPDATE4：

我现在已经嵌入了样式表并删除了对外部样式表的引用（旧样式表，以及下面用户Bracketsage中更新的样式表）。可以看到他们在head标签中将HTML源视为HTML注释。如果引用外部样式表，bug仍然存在... 我暂时删除了这个bug，因为开发这个bug很烦人，因为f ***

1 个答案:

答案 0 :(得分：1)

我好像有工作......

我对这个文件所做的一件事就是替换没有任何内容的\ r并严格使用\ n因为它在正则表达式测试中让我烦恼。镀铬中反复刷新可以保持一切。

另一件事是将质量标签固定器全部放在一行上。我不知道这有帮助。

我还删除了你已注释掉的样式，并且无可否认地删除了批量标签重新混音的评论。我知道你想把它放回去。

我将profile.css重命名为new.css（仅用于我的测试）并建议您执行类似的操作，以便随机缓存不会令您失望。

这里的css与我在new.css中完全相同。

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure,  footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

body {
    line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
    display:block;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000; 
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;   
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}



body {
  background-color:#F1F2F2;
  margin:0;
  padding:0;
  font-family:'Open Sans',Verdana, Geneva, Arial, Helvetica, sans-serif;
  font-size:12px;
  line-height:15px;
  width:100%;
  height:auto;
  outline:none;
  color:#404041;
}
div {
  width:100%;
  height:auto;
}
#profileHeader {
  background-color:#D1D3D4;
  width:960px;
  margin:0 auto;
  font-size:12px;
  height:auto;
}
#userFunctions {
  width:960px;
  height:50px;
  margin:0 auto;
}
#userFunctions span {
  cursor:pointer;
}
#logo {
  margin-top:10px;
  width:50%;
  display:inline-block;
  height:40px;
  background-image:url('../images/Logo-Orange.png');
  background-position:top left;
  background-repeat:no-repeat;
}
#functions {
  width:auto;
  float:right;
  text-align:right;
  height:30px;
  line-height:30px;
  display:inline-block;
}
#functions span {
  margin-left:16px;
  margin-right:4px;
  text-transform:uppercase;
  font-size:12px;
}
#profileHeader div {
  display:inline-block;
}
#displayImage {
  width:175px;
  height:175px;
  background-image:url('../images/axe-guy.jpg');
  border-right-width:2px;
  border-right-style:solid;
  border-right-color:#F1F2F2;
}
#bannerText {
  width:560px;
  height:155px;
  display:inline-block;
  float:right;
  padding-left:20px;
  padding-top:20px;
  padding-right:20px;
  border-right:2px solid #F1F2F2;
  position:relative;
  top:0;
  left:0;
}
#verifiedID {
  width:170px;
  height:175px;
  float:right;
  display:inline-block;
  font-size:14px;

}
#verifiedID .title {
  height:30px;
  width:155px;
  display:inline-block;
  padding-left:10px;
  line-height:30px;
  border-bottom:2px solid #F1F2F2;
}
#verifiedID .idType {
  width:160px;
  height:135px;
  display:inline-block;
  padding:5px 0 0 5px;
  line-height:22px;
  font-size:13px;
}
#verifiedID .idType img {
  vertical-align:middle;
  display:block;
  float:left;
}
#verifiedID .idType span {
  float:left;
  margin-bottom:12px;
  width:138px;
  text-indent:5px;
  display:inline;
}
#idTypes {
  width:165px;
  height:130px;
  float:right;
  display:inline-block;
  font-size:13px;
}
#navigation {
  width:960px;
  height:30px;
  background-color:#F15A29;
  margin:0 auto;
}
.navButton {
  color:#FFF;
  font-size:13px;
  width:318px;
  height:30px;
  line-height:30px;
  text-align:center;
  border-right:2px solid #F1F2F2;
  float:left;
}
.navButton .active {
  background-color:#939598;
}
#shopListings {
  width:960px;
  margin:0 auto;
  overflow:hidden;
}
.listing {
  width:320px;
  height:212px;
  float:left;
  background-image:url('../images/craftdeck_default_item_1.png');
}
.listing img {
  opacity:0.3;
}
.listing .pricetag {
  height:53px;
  width:123px;
  display:block;
  opacity:0;
  position:relative;
  background-image:url('../images/Pricetag-Full.png');
  bottom:212px;
  left:193px;
  font-size:20px;
  font-weight:normal;
  line-height:53px;
  text-indent:35px;
}
.listing .socialMedia {
  width:84px;
  height:27px;
  display:block;
  opacity:0;
  bottom:87px;
  left:3px;
  -webkit-border-radius:4px;
  border-radius:4px;
  -moz-border-radius:4px;
  -o-border-radius:4px;
  background-color:#FFF;
  position:relative;
}
.listing .socialMedia img {
  opacity:1;
  cursor:pointer;
}
.navButton {
  cursor:pointer;
}
.navButton.active {
  background-color:#939598 !important;
}
#viewMore {
  width:126px;
  height:31px;
  margin:0 auto;
  border-radius:0;
  border-bottom-right-radius:13px;
  border-bottom-left-radius:13px;
  background-color:#D1D2D4;
  font-size:14px;
  line-height:31px;
  text-align:center;
  cursor:pointer;
}
#reviews {
  width:960px;
  margin:0 auto;
}
#totalReviews {
  width:175px;
  height:176px;
  font-size:80px;
  font-weight:lighter;
  background-image:url('../images/totalReviews.png');
  line-height:176px;
  text-align:center;
  color:#A7A9AC;
  background-repeat:no-repeat;
  padding-right:75px;
  float:left;
}
#reviewContainer {
  width:710px;
  float:right;
}
.review {
  width:100%;
  height:70px;
  overflow:hidden;
  margin-bottom:30px;
}
.reviewDisplayPic {
  width:70px;
  height:70px;
  margin-right:5px;
  display:inline-block;
  float:left;
}
.reviewContent {
  width:625px;
  padding:5px 5px 0 5px;
  height:65px;
  display:inline-block;
  float:right;
  background-color:#D1D3D4;
  overflow:hidden;
}
.reviewReadMore {
  float:right;
  width:635px;
  height:15px;
  float:right;
  display:inline-block;
  background-color:#D1D3D4;
  background-image:url('../images/Review-Read-More.png');
  position:relative;
  top:0;
  left:0;
  cursor:pointer;
}
.reviewReply {
  width:635px;
  float:right;
  height:45px;
  overflow:hidden;
  margin-bottom:30px;
  position:relative;
  top:-25px;
}
.reviewReplyDisplayPic {
  width:45px;
  height:45px;
  margin-right:5px;
  display:inline-block;
  float:left;
}
.reviewReplyContent {
  width:575px;
  padding:5px 5px 0 5px;
  height:40px;
  display:inline-block;
  float:right;
  background-color:#D1D3D4;
  overflow:hidden;
}
.reviewReplyReadMore {
  float:right;
  width:585px;
  height:15px;
  float:right;
  display:inline-block;
  background-color:#D1D3D4;
  background-image:url('../images/Review-Read-More.png');
  position:relative;
  top:0;
  left:0;
  cursor:pointer;
}
#writeAReviewTop {
  margin-top:20px;
  float:left;
  width:175px;
  height:27px;
  border:1px solid #F15A29;
  background-color:#D1D3D4;
}
#seeMore {
  display:inline-block;
  width:auto;
  height:27px;
  font-size:15px;
  line-height:27px;
  color:#F15A29;
  padding-left:5px;
  cursor:pointer;
}
#writeAReviewContainer {
   width:175px;
   height:27px;
   float:right;
   display:inline-block;
   cursor:pointer;
}
#writeAReview {
  width:175px;
  height:27px;
  border:1px solid #F15A29;
  background-color:#D1D3D4;
}
#chatBox {
  width:960px;
  height:337px;
  margin:0 auto;
  background-color:#D1D3D4;
}
相关问题
最新问题