为什么我的计算器在其他电脑上看起来很奇怪？答案

【问题标题】：Why does my calculator look odd on other computers?为什么我的计算器在其他电脑上看起来很奇怪？
【发布时间】：2015-11-15 11:51:16
【问题描述】：

为什么我的计算器在其他计算机上看起来很奇怪？是否有任何 JS、HTML5 或 CSS 代码使其在所有计算机上看起来都一样？为什么会这样？几个小时以来一直在尝试解决此问题，但没有找到任何有用的教程或 StackOverFlow 帖子。

我的代码：

<!DOCTYPE html>
<html>
<head>
<title>Calc</title>
<style>
.calc {border: groove 6px; margin-left: 530px; margin-right: 530px; padding-top: 10px; padding-bottom: 10px; height: 255px;}

input {text-align: center;height: 30px;}

.results {padding-bottom: 7px;}

.top {float: left; padding-left: 20px;}

.numbers {float: left; padding-left: 20px; padding-top: 15px;}

.symbols {float: right; margin-top: -40px; padding-right: 15px;}

button {width: 30px; height: 30px;}
</style>
<script>
function myFunction(clickedId) {
    document.calc.result.value+=clickedId;
}
function Clear() {
    document.calc.result.value="";
}
function compute() {
 try{
 var inp=eval(document.calc.result.value);
 document.calc.result.value=inp;
 }
 catch(err){
  document.calc.result.value="error";
 }
}
function doMath() {
 var inputNum1=document.calc.result.value;
 var result = Math.sqrt(inputNum1);
 document.calc.result.value = result;
}
function myMultiply() {
 var x = parseInt (document.calc.result.value, 10);
 var y = x*x;
 alert(x + " times " + x + " equals " + y);
 return false;
}
function compute() {
 try{
    var inp=eval(document.calc.result.value);
    if(document.calc.result.value==inp)
    inp=inp*inp
    document.calc.result.value=inp;
 }
 catch(err){
  document.calc.result.value="error";
 }
}
</script>
</head>
<body>
<div class="calc">
<center>
<div class="results">
    <form name="calc">
    <input type="text" name="result" readonly>
    </form>
</div>
<table>
<div class="top">
    <button type="button" id="CLEAR" onclick="Clear()"><font color="#CC0000">C</font></button> <!--Izdzēst rakstīto-->
    <button type="button" id="3.141592653589793" onclick="myFunction(this.id)">π</button> <!--Skaitlis 3.14...-->
    <button type="button" id="6.283185307179586" onclick="myFunction(this.id)">τ</button> <!--Skaitlis 6.28...-->
</div>
<br>
<div class="numbers">
    <button type="button" id="1" onclick="myFunction(this.id)">1</button> <!--Skaitlis 1-->
    <button type="button" id="2" onclick="myFunction(this.id)">2</button> <!--Skaitlis 2-->
    <button type="button" id="3" onclick="myFunction(this.id)">3</button> <!--Skaitlis 3-->
<br>
    <button type="button" id="4" onclick="myFunction(this.id)">4</button> <!--Skaitlis 4-->
    <button type="button" id="5" onclick="myFunction(this.id)">5</button> <!--Skaitlis 5-->
    <button type="button" id="6" onclick="myFunction(this.id)">6</button> <!--Skaitlis 6-->
<br>
    <button type="button" id="7" onclick="myFunction(this.id)">7</button> <!--Skaitlis 7-->
    <button type="button" id="8" onclick="myFunction(this.id)">8</button> <!--Skaitlis 8-->
    <button type="button" id="9" onclick="myFunction(this.id)">9</button> <!--Skaitlis 9-->
<br>
    <button type="button" id="0" onclick="myFunction(this.id)">0</button> <!--Skaitlis 0-->
</div>
<br>
<div class="symbols">
    <button type="button" id="ANS" onclick="compute()">=</button> <!--Vienādības zīme-->
	<br>
	<button type="button" id="+" onclick="myFunction(this.id)">+</button> <!--Plusa zīme-->
	<br>
    <button type="button" id="-" onclick="myFunction(this.id)">-</button> <!--Mīnusa zīme-->
	<br>
    <button type="button" id="*" onclick="myFunction(this.id)">x</button> <!--Reizināšanas zīme-->
	<br>
    <button type="button" id="/" onclick="myFunction(this.id)">÷</button> <!--Dalīšanas zīme-->
	<br>
	<button type="button" id="SQRT" onclick="doMath()">√</button> <!--Kvadrātsakne-->
	<br>
	<button type="button" id="imp*inp" onclick="compute()"><sub>2</sub></button> <!--Kvadrāts-->
</div>
<br>
</table>
</center>
</div>
</body>
</html>

【问题讨论】：

“奇数”是什么意思？可能一些重置脚本（或其部分）会有所帮助。您的大多数问题可能是不同用户代理样式的结果。
看起来有什么不同？哪些浏览器工作，哪些不工作？这不是计算机的错，这完全取决于浏览器及其对 CSS/JS 标准的实现，以及您对它的使用。是的，您可能还可以做更多的事情来保护自己免受跨浏览器的困扰。是的，解决这些差异很大程度上取决于您作为开发人员。
什么是“其他”计算机？它在您的计算机上是什么样子的？
您的 HTML 无效且不标准。例如：<center> tag is deprecated 和 <table> should not directly contain <div> or <br>。此外，您遵循的 ID 命名与 HTML principles 背道而驰：“标识符是不透明的字符串。不应从 id 属性的值派生特定含义。”。我的建议：修复代码并使其有效和标准，然后您（通常）不会遇到任何显示问题

标签： javascript css html calculator calc

【解决方案1】：

不是一个真正的答案，但我建议您让您的代码更清晰、更易于维护，因此更容易调试，并且首先不易出现此类错误。例如，不要为每个数字按钮设置相同的 onclick 属性，而是尝试类似

<button class="number">1</button>
<button class="number">2</button>
<button class="number">3</button>
<!-- etc -->
<button class="number">0</button>

在你的 JS 中：

var numbers = document.getElementsByClassName("number");
for(var i = 0; i < numbers.length; i++) {
    numbers[i].onclick = function() {
        // put whatever you want to happen when you click it here
        doWhatever();
    }
}

您的许多其他 HTML 都可以通过类似方式进行改进。

【讨论】：