Question

在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>

Answer 1

实际上按钮大小并没有缩小，但是轮廓和边框属性正在影响它的大小，这是不同浏览器的默认行为。请看下面的代码段。

禁用边框和大纲，不再发生这种情况。

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>

Answer 2

尝试设置此CSS：

    border: 0; 
    padding: 0; 
    margin-top:-2px; 
    margin-bottom: -2px;

参考：https://davidwalsh.name/firefox-buttons

Answer 3

将此添加到您的风格

 input{
  border : 0px
 }

我检查了firefox Inspector，发现默认的firefox按钮的边框为3（水平），0为垂直边框，当你更改背景时，边框水平变为2。如果明确将边框设置为0，则大小不会减小。

在Firefox中，为什么当javascript更改背景颜色时HTML按钮大小会减少？

3 个答案: