Javascript 为什么文本框和周围跨度之间有高度差？

为什么在给定以下html的情况下，元素高度会有差异

<span id="spanner" style="margin:0;padding:0;border:0;outline:0;"><input type="text" /></span>

---

当你询问文本框的高度时，你会得到16px。跨距的高度报告为19px（通常为22px）。

输入元素将具有默认边框和填充，这可能因浏览器而异。尝试删除以下内容：

<input type="text" style="padding: 0; border: 0" />

---

尝试在Firefox中使用Firebug检查元素，以查看元素的有效填充/边距/边框。在您的示例中，您将看到文本字段在顶部和底部有一个2px边框和一个1px填充。

因为父元素将文本框的边框、填充和边距的像素考虑在内。

<。。。这就是为什么*{margin:0；padding:0；}是个好主意：）我还尝试合并一个负责所有元素的重置样式表。将填充和边框重置为零，它们都报告相同的内容。谢谢。IE-box模式与所有其他浏览器不同。宽度为总宽度，包括边框边距和填充，而其他宽度则是除元素之外的边框边距和填充。