0
내 웹 사이트에서 "시작"을 누르면 내가 가진 스톱워치 스크립트가 활성화됩니다. 파이어 폭스를 제외한 모든 브라우저에서 정상적으로 작동합니다. 파이어 폭스에서 매초마다 똑딱 거리는 컨테이너의 높이에 4px 이상을 추가합니다. 그래서 이상합니다. 수정 방법에 대한 아이디어가 있습니까? 나는 윈도우 7스크립트가 실행될 때마다 매초마다 내 컨테이너 높이에 4px를 추가하며 파이어 폭스에서만 발생합니다.
HTML에 파이어 폭스 (34)를 사용하고
<!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>
자바 스크립트 :
$(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 : 내가 보인다 그래서
* {
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;
}
"vh"inuts가이 동작을 일으키는 것 같습니다. 컨트롤 유닛을 변경할 때 증가를 멈추는 것처럼 보입니다. – Mouser
당신이 옳습니다. 이게 파이어 폭스의 버그라고 생각하니? 어떻게 생각해? – ifusion
전에는 본 적이 없기 때문에 그것은 내 눈을 사로 잡았습니다. 그러니 예상되는 행동이 무엇인지 지금 생각하지 마라. 버그 일 수도 있고 불행한 규칙의 수렴 일 수도 있습니다. – Mouser