Question

所以我得到了这个让我难过的有趣错误。我有一个JS计时器，倒计时直到圣诞节。它按预期工作。它动态更新Days，Hours，Minutes和Seconds div的内容。除了此范围外，它在所有屏幕尺寸中都能正确显示：737px - 766px（参见屏幕截图）。

。

出于某种原因，div崩溃并且没有显示数字。但是，如果我使用我的Google Developer Tools - Console，我可以确认这些数字实际上是存入div中的（请参见下面的屏幕截图）。

由于某种原因我无法查明，这些数字不会显示在此屏幕尺寸范围内。代码如下：

<style>
.ct-increment-container {
   border: 3px solid #eb1c24;
   border-radius: 10px;
   display: block;#eb1c24;
   float: left;
   margin-right: 7px;
}
#ct-days, #ct-hours, #ct-minutes, #ct-seconds {
   font: 40px "Ubuntu", sans-serif;
   font-weight: 500;
   line-height: 1;
   color: black;
   text-align: center;
   padding: 5px;
}
.ct-increment-container .ct-label {
   background-color: #eb1c24;
   color: white;
   font-size: 11px;
   font-family: "Open Sans", sans-serif;
   text-align: center;
   text-transform: uppercase;
   display: block;
   width: 100%;
   border-bottom-right-radius: 5px;
   border-bottom-left-radius: 5px;
   padding: 3px 0 1px;
}
.ct-msg {
    clear: both;
    text-transform: uppercase;
    text-align: center;
    color: red;
}
@media (min-width: 1025px) {
   #cmas-timer {
      display: table;
      margin-top: -8px;
   }
   .ct-msg { 
      display: table-cell; 
      vertical-align: middle;
      font-size: 26px;
   }
}
@media (min-width: 959px) and (max-width: 1025px) {
   .top-banner {
      height: 125px;
   }
   #cmas-timer {
      margin-top: -8px;
   }
   .ct-msg { 
      display: block;
      padding-top: 5px;
      font-size: 20px;
   }
}

@media (max-width: 959px) {
   #cmas-timer {
      position: absolute;
      left: 50%;
      margin-left: -135px;
   }
   .ct-msg { 
      display: block;
      padding-top: 5px;
      font-size: 20px;
   }
}
@media (min-width: 767px) and (max-width: 959px) {
   .top-banner {
      margin-top: 135px;
   }
   #cmas-timer {
      top: -116px;
   }
}
@media (max-width: 767px) {
   div#main {
      margin-top: 110px;
   }
   #cmas-timer {
      top: 95px;
   }
}
</style>

<div id="cmas-timer">
   <div class="ct-increment-container">
      <div id="ct-days"><!-- Javascript prints days here --></div>
      <div class="ct-label">Days</div>
   </div>
   <div class="ct-increment-container">
      <div id="ct-hours"><!-- Javascript prints hours here --></div>
      <div class="ct-label">Hours</div>
   </div>
   <div class="ct-increment-container">
      <div id="ct-minutes"><!-- Javascript prints minutes here --></div>
      <div class="ct-label">Minutes</div>
   </div>
   <div class="ct-increment-container">
      <div id="ct-seconds"><!-- Javascript prints seconds here --></div>
      <div class="ct-label">Seconds</div>
   </div>
   <div class="ct-msg">'Til Christmas</div>
</div>


<script>
var deadline = 'December 24 2017 23:59:59';
function getTimeRemaining(){
  var t = Date.parse(deadline) - Date.parse(new Date());
  var seconds = Math.floor( (t/1000) % 60 );
  var minutes = Math.floor( (t/1000/60) % 60 );
  var hours = Math.floor( (t/(1000*60*60)) % 24 );
  var days = Math.floor( t/(1000*60*60*24) );
  return {
    'total': t,
    'days': days,
    'hours': hours,
    'minutes': minutes,
    'seconds': seconds
  };
}
function pad(n) {
    return (n < 10) ? ("0" + n) : n;
}
function updateClock(){
  var t = getTimeRemaining();
  document.getElementById("ct-days").innerHTML = pad(t.days);
  document.getElementById("ct-hours").innerHTML = pad(t.hours);
  document.getElementById("ct-minutes").innerHTML = pad(t.minutes);
  document.getElementById("ct-seconds").innerHTML = pad(t.seconds);
  if(t.total<=0){
    clearInterval(timeinterval);
  }
}

updateClock(); // run function once at first to avoid delay
var timeinterval = setInterval(updateClock,1000);
</script>

Answer 1

您应该提供实时页面/演示的链接，因为您的代码工作正常，您可以在此处清楚地看到 - https://jsfiddle.net/ncsresjw/

由于定位规则，它只是跳跃，例如：

#cmas-timer {
   top: -116px;
}

因此，必须有其他影响文本的内容，而且无法仅通过一个屏幕截图和一个（工作）片段来确定原因。

JS动态添加的内容没有显示在特定的屏幕尺寸（CSS / Layout？）

1 个答案: