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

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

javascript html

在Firefox中，为什么当javascript更改背景颜色时HTML按钮大小会减小？,javascript,html,Javascript,Html,在Firefox和其他浏览器中，为什么当JavaScript更改背景颜色时HTML按钮大小会减小我如何阻止它发生 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Test</title> <script> function fnHello() { doc

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


试验
函数fnHello（）
{
document.getElementById（“idHello”）.style.background='#ff0000'；
}

这实际上不是按钮大小的缩小，而是轮廓和边框属性影响其大小，这是不同浏览器的默认行为。请看下面的代码片段

禁用边框和轮廓，这种情况不再发生

输入[类型=按钮]{
边界：无；
大纲：无；
}
输入[类型=按钮]：焦点{
边界：无；
大纲：无
}


试验
函数fnHello（）{
document.getElementById（“idHello”）.style.background='#ff0000'；
}

尝试设置此CSS：

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

参考：

将此添加到您的样式中

 input{
  border : 0px
 }

我检查了firefox检查器，发现默认的firefox按钮的边框是3（水平方向）和0（垂直方向），当你改变背景时，边框水平方向变成2。如果将边框显式设置为0，则大小不会减小