Javascript 按钮或文本的位置根据内部内容是否存在而变化

请看下面的代码

var=false；
函数myfunction（）{
如果（！单击）{
单击=真；
var textnode=document.createTextNode（“h”）；
document.getElementById（“按钮id”）.appendChild（textnode）；
}否则{
单击=假；
var elem=document.getElementById（“按钮id”）；
elem.removeChild（elem.childNodes[0]）；
}
}

.button类{
宽度：20px；
高度：20px；
边框：1px纯黑；
填充：0px；
边际：0px；
溢出：隐藏；
显示：内联块；
}

---

这样做

这是一个典型的基线问题（考虑到一些问题是如何形成的，并不总是很容易找到）

一个简单的解释是：如果没有文本，线条高度是

0

，因此它与该点对齐。当有文本时，行高会移动，因此按钮会移动以使文本的底部与文本的其余部分对齐

您可以使用

垂直对齐：中间：


var=false；
函数myfunction（）{
如果（！单击）{
单击=真；
var textnode=document.createTextNode（“h”）；
document.getElementById（“按钮id”）.appendChild（textnode）；
}否则{
单击=假；
var elem=document.getElementById（“按钮id”）；
elem.removeChild（elem.childNodes[0]）；
}
}
.button类{
宽度：20px；
高度：20px；
边框：1px纯黑；
填充：0px；
边际：0px；
溢出：隐藏；
显示：内联块；
垂直对齐：中间对齐；
}
这样做
这是一个典型的基线问题（考虑到一些问题是如何形成的，并不总是很容易找到）

一个简单的解释是：如果没有文本，线条高度是
0
，因此它与该点对齐。当有文本时，行高会移动，因此按钮会移动以使文本的底部与文本的其余部分对齐

您可以使用
垂直对齐：中间：


var=false；
函数myfunction（）{
如果（！单击）{
单击=真；
var textnode=document.createTextNode（“h”）；
document.getElementById（“按钮id”）.appendChild（textnode）；
}否则{
单击=假；
var elem=document.getElementById（“按钮id”）；
elem.removeChild（elem.childNodes[0]）；
}
}
.button类{
宽度：20px；
高度：20px；
边框：1px纯黑；
填充：0px；
边际：0px；
溢出：隐藏；
显示：内联块；
垂直对齐：中间对齐；
}
执行此操作
我知道一些解决方法，但我想知道为什么会发生这种情况？更新了我的答案以提供一些上下文。我希望这有帮助！这一解释适用于Firefox，但我认为我可以为Chrome的行为提出类似的理由。更奇怪的是，浏览器的处理方式有所不同。当一个浏览器试图将整行保持在同一位置（只有下面的行会回流），另一个浏览器则让按钮控制行高（相关行和下面的行向上移动）。可能有一个（缺乏）规范文档可以解释这种差异。我知道解决它的一些方法，但我想知道为什么会发生？更新了我的答案，提供了一些上下文。我希望这有帮助！这一解释适用于Firefox，但我认为我可以为Chrome的行为提出类似的理由。更奇怪的是，浏览器的处理方式有所不同。当一个浏览器试图将整行保持在同一位置（只有下面的行会回流），另一个浏览器则让按钮控制行高（相关行和下面的行向上移动）。可能有（缺少）规范文档可以解释这种差异。