为什么在gwt中120px宽的列​​表框比120px宽的文本框短？

Question

我正在开发一个简单的GWT应用程序。

我有一个FlexTable，里面有标签和输入小部件（例如列表框，文本框，日期选择器...），这种模式：
标签输入标签输入
标签输入标签输入
等等，所以我有两列输入字段及其描述。 我在每个输入小部件上强制使用setwidth("120px")，所以我希望它们排成一行（垂直）。但他们不是！列表框元素比文本框短，没有明显的原因 有人能解释一下吗？

Answer 1

有应该是明显的原因，我也尝试了你的情况，但我没有遇到过这样的问题，它应该在你身边尝试使用firebug，你可以从那里找到一些东西。这是我用你描述的代码得到的，除了setWidth("120px")之外我没有添加任何css样式：

Answer 2

使用此链接可以让您更好地理解。 fiddle here

一个120px宽的文本框将是120宽，然后添加边框（1px任一边），并且也添加填充（1px任一边），使124px宽文本框。 但是在列表框中，包括边框和填充在内的总宽度将为120。 这里的关键是如果你想要一个宽度为120px的文本框，并且每边的边框为1px，每边填充1px，那么你需要将宽度设置为116px。保持选择为120px。

Answer 3

你正在和2种不同的盒子模型搏斗。如果将两者都设置为box-sizing:border-box（可能需要供应商前缀），那么您将看到一致的渲染。

见这里：http://paulirish.com/2012/box-sizing-border-box-ftw/