当脚本运行时，它每秒使容器的高度增加4px，仅在firefox中发生吗？

Question

When you press "start" on my website it activates the stop watch script I have. 当您在我的网站上按“开始”时，它将激活我拥有的秒表脚本。 It works fine on all browsers except firefox. 它在除Firefox外的所有浏览器上都能正常工作。 In firefox every second that ticks over it adds usally 4px's or more to the height of the container.. So strange.. Any ideas on how to fix? 在firefox中，每秒钟滴答一跳，通常会使容器的高度增加4px或更多。.很奇怪..关于如何修复的任何想法吗？ I am using Firefox 34 on Windows 7. 我在Windows 7上使用Firefox 34。

CodePen Demo CodePen演示

HTML HTML

<!DOCTYPE html>
<html>
<head>
    <title>Runna - Track your run!</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=no">
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link href='http://fonts.googleapis.com/css?family=Lato:400,700,900' rel='stylesheet' type='text/css'>
    <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="js/js.js"></script>
    <script src="js/modernizr.js"></script>
</head>
<body>
<div class="wrapper">

    <header>
        <img src="imgs/logo-blue.png" />
    </header>
    <div id="map-container">
       <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d11564.804405086046!2d172.59430635!3d-43.56069255!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2snz!4v1418977732755" frameborder="0" style="border:0"></iframe>
    </div>
    <div class="show-controls"><i class="fa fa-chevron-up"></i></div>
    <section id="control-container">
        <div class="column left">

                 <div id="left-wrapper">
                    <div class="left-top">
                       <ul>
                          <li><b>Distance</b></li>
                          <li>17.7KM</li>
                       </ul>
                    </div>

                    <div class="left-bottom">
                        <ul>
                          <li><b>Duration</b></li>
                          <li><span id="stop-watch"><time>00:00:00</time></span></li>
                       </ul>
                    </div>
                 </div>

        </div>
        <div class="column middle">
            <nav>
                <ul>
                  <li><a href="#" class="arrow"><div><i class="fa fa-chevron-down"></i></div></a>
                      <a href="#" id="start"><div>START</div></a>
                      <a href="#" id="clear"><div>STOP</div></a>
                      <a href="#" id="stop"><div>PAUSE</div></a>

                    </li>
                </ul>
            </nav>
        </div>
        <div class="column right"></div>
    </section>

</div>
</body>
</html>

Javascript: 使用Javascript：

$(document).ready(function() {
    var arrowButton = $('a.arrow');
    var controlContainer = $('#control-container');



    arrowButton.on('click', function(event) {
        event.preventDefault();
        controlContainer.fadeOut('fast');
        $('.show-controls').show();
        $('#map-container').css('height', '87vh');
    });

    $('.show-controls').on('click', function(event) {
        event.preventDefault();
        controlContainer.fadeIn('fast');
        $('.show-controls').hide();
        $('#map-container').css('height', '65vh');
    });

// Stop watch script

var h2 = document.getElementById('stop-watch'),
    start = document.getElementById('start'),
    stop = document.getElementById('stop'),
    clear = document.getElementById('clear'),
    seconds = 0, minutes = 0, hours = 0,
    t;

function add() {
    seconds++;
    if (seconds >= 60) {
        seconds = 0;
        minutes++;
        if (minutes >= 60) {
            minutes = 0;
            hours++;
        }
    }

    h2.innerHTML = (hours ? (hours > 9 ? hours : "0" + hours) : "00") + ":" + (minutes ? (minutes > 9 ? minutes : "0" + minutes) : "00") + ":" + (seconds > 9 ? seconds : "0" + seconds);

    timer();
}
function timer() {
    t = setTimeout(add, 1000);
}

/* Start button */
start.onclick = function(){
    timer();
}

/* Stop button */
stop.onclick = function() {
    clearTimeout(t);
}

/* Clear button */
clear.onclick = function() {
    h2.innerHTML = "00:00:00";
    seconds = 0; minutes = 0; hours = 0;
}




});

CSS: CSS：

* {
    margin: 0;
    padding: 0;
    font: 100% arial;
    overflow: hidden;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
  box-sizing: border-box;         /* Opera/IE 8+ */ 
}

#wrapper {
   height: 100vh;
}

.show-controls {
   width: 100%;
   height: 8vh;
   background: black;
   text-align: center;
   color: white;
   position: relative;
   display: none; /*Initially hidden, will use jQuery to reveal when needed*/
}

.fa-chevron-up {
   position: absolute;
   top: 50%;
   left: 50%;
   -webkit-transform: translate(-50%, -50%);
           transform: translate(-50%, -50%);
}

#map-container {
   height: 65vh;
}

.show-controls:hover {
   background: green;
}
.column.middle ul, .column.middle nav, .column.middle li {
    height: 100%;
    width: 100%;
}

.column.middle nav {
  display: inline-block;
}

.column.middle li {
    display: table;
    width: 100%;
}
.column.middle li a {
    display: table-row;
    width: 100%;
}
.column.middle li a div {
    display: table-cell;
    vertical-align: middle;
}

    header {
     width: 100%;
     height: 5vh;
     background: black;
     position: relative;


    }
    header img {
      height: 80%;
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
              transform: translate(-50%, -50%);
    }
    iframe {
        width: 100%;
        height: 100%;
        display: block;
    }
    #control-container {
        width: 100%;
        height: 30vh;
        background: black;
        display: table;
    }
    .column {
        display: table-cell;
        color: white;
        width: 100%;
        text-align: center;
    }
    .row {
        display: block;
        width: 100%;
    }
    .left {
        background: #0f0f0f;
        width: 33.3%;
        height: 100%;
        position: relative;
    }
    .middle {
        background: black;
        width: 33.3%;
        height: 100%;
    }
    .right {
        background: #0f0f0f;
        width: 33.3%;
        height: 100%;
    }
    nav ul {
        height: 100%;
        margin: 0;
        padding: 0;
    }
    nav li {
        display: block;
    }
    nav a {
        color: white;
        text-decoration: none;
        text-align: center;
        width: 100%;
        padding: 30px;
    }
    nav a:hover {
        background: green;
    }

#left-wrapper {
   height: 100%;
}

.left-top, .left-bottom {
   height: 50%;
   position: relative;
    text-align: center;
}

.left-top ul, .left-bottom ul {
   position: absolute;
   top: 50%;
   left: 50%;
   -webkit-transform: translate(-50%, -50%);
           transform: translate(-50%, -50%);
   list-style: none;
}

Answer 1

Ok so I have seem to have fixed this issue by removing overflow: hidden from the * selector at the top of my css and I have added it to the html selector that I have now created. 好的，所以我似乎已经通过消除overflow: hidden来解决此问题overflow: hidden在我的CSS顶部的*选择器中overflow: hidden它，并将其添加到我现在创建的html选择器中。

* {
    margin: 0;
    padding: 0;
    font: 100% arial;
    overflow: hidden; /*<-- Removed from here*/
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
     box-sizing: border-box;         /* Opera/IE 8+ */ 
}

html {
  overflow: hidden; /*<-- Added here*/
}

当脚本运行时，它每秒使容器的高度增加4px，仅在firefox中发生吗？

问题描述

1 个解决方案

解决方案1
1 已采纳 2014-12-27 23:18:51

当脚本运行时，它每秒使容器的高度增加4px，仅在firefox中发生吗？

问题描述

1 个解决方案

解决方案1 1 已采纳 2014-12-27 23:18:51

解决方案1
1 已采纳 2014-12-27 23:18:51