JS動的に追加されたコンテンツが特定の画面サイズで表示されない（CSS /レイアウト？）

Question

私はこの面白いバグを持っています。クリスマスまでカウントダウンしているJSタイマーがあります。それは期待どおりに機能しています。日、時、分、秒のdivの内容を動的に更新します。この範囲を除くすべての画面サイズで正しく表示されます：737px - 766px（スクリーンショット参照）。

。

何らかの理由で、divが崩壊して数字が表示されません。ただし、Google Developer Tools - Consoleを使用している場合、その番号が実際に事業部に入金されていることが確認できます（下記スクリーンショット参照）。私は、数字は、この画面の大きさの範囲で表示されません正確に特定することはできませんいくつかの理由

。コードの下で：

<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; 
} 

、ちょうど1つのスクリーンショットと1（作業）スニペットから原因を特定するために、テキストと、それは可能ではないに影響を与える他の何かがなければなりません。