标签 javascript html
<分区>
在 Firefox 和其他浏览器中，为什么当 JavaScript 更改背景颜色时 HTML 按钮大小会减小？
如何阻止它发生？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<script>
function fnHello()
{
document.getElementById("idHello").style.background = '#ff0000';
}
</script>
</head>
<body>
<input id="idHello" type="button" value="Hello" onclick="fnHello();" />
</body>
</html>
最佳答案
实际上并不是按钮尺寸缩小了，而是 outline 和 border 属性影响了它的尺寸，这是不同浏览器的默认行为。请看以下代码段。
禁用边框和轮廓，它不会再发生了。
input[type=button] {
border: none;
outline: none;
}
input[type=button]:focus {
border: none;
outline: none
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<script>
function fnHello() {
document.getElementById("idHello").style.background = '#ff0000';
}
</script>
</head>
<body>
<input id="idHello" type="button" value="Hello" onclick="fnHello();" />
</body>
</html>关于javascript - 在 Firefox 中，为什么当 javascript 更改背景颜色时 HTML 按钮大小会减小？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50758741/