网站在除谷歌浏览器之外的所有浏

Question

所以我正在练习一些初学HTML和CSS，我正在这个演示网站上工作。我在Chrome中看到了我想要的一切，当我在其他浏览器（Edge，Firefox和Internet Explorer）中进行测试时，顶部的菜单栏在每一个上都放错了位置。它太高或太低了。

这里发生了什么？

https://jsfiddle.net/o51km0ub/

//Generate random number between 1 and 500

var randomNumber = Math.floor((Math.random() * 500) + 1);

//Create variables to store info for loops and displaying info back to user
var guessIn = document.getElementById('userGuess');
var guessOut = document.getElementById('guessesMade');
var counter = 0;

//function runs when the guess button is hit

function guess() {
  //declare temp local var and store as an integer for conditional testing
  var guessValue = parseInt(guessIn.value);
  
  //if statement for finding the value and reporting to the user
  //check if the counter is less than 10 and guessValue is not empty
    if (counter < 10 && guessValue) {
      counter++;
    }  
  //the guess is correct
    if (guessValue == randomNumber) {
      guessOut.value = guessOut.value + '\n' + "Guess " + counter + " is " + guessIn.value + ':' + ' You have correctly guessed the number. You may escape.';
    }
  // the guess is greater
    if (guessValue > randomNumber) {
      guessOut.value = guessOut.value + '\n' +"Guess " + counter + " is " + guessIn.value + ':' + ' Your guess is incorrect. The number I am thinking of is lower.';
    }
  //the guess is lower
    if (guessValue < randomNumber) {
      guessOut.value = guessOut.value + '\n' + "Guess " + counter + " is " + guessIn.value + ':' + ' Your guess is incorrect. The number I am thinking of is higher.';
    }
  //when all 10 guesses are used
  else if (counter == 10) {
    guessOut.value = guessOut.value + '\n' + "You did not guess the number I was thinking, " + randomNumber + "." + " You have met your end. Goodbye.";
  }
  return false;
}

//Show the number to guess upon clicking the checkbox for Cheat
function cheat() {
  if (document.getElementById('cheat').checked) {  document.getElementById('cheatNumber').value = randomNumber;
    document.getElementById('cheatShow').style.display = 'inline';
  }
  else {  document.getElementById('cheatNumber').value = '';
 document.getElementById('cheatShow').style.display = 'none';
  }
}

//function to reset the game
function reset() {
  //reset guess value
  userGuess.value = "";
 //reset text area 
  guessesMade.value = "";
  //reset counter
  counter = 0;
  //set new random number for play
  randomNumber = Math.floor((Math.random() * 500) + 1);
  return false;
}

Answer 1

每个浏览器都有一个默认的CSS。你必须在任何其他风格之前写一个重置css。

最常见的重置css是Eric Meyer的重置。

您也可以编写以下内容进行快速检查。

*{
   margin:0; 
   padding:0
 }