首先，我在主题中说"没有HTML黑客"，因为我没有足够的空间将所有这些黑客放在一行上。
我遇到了这些问题，但它们不能满足我的需求：
宽度为 100% 的 CSS 输入超出父级的绑定
如何为 HTML 文本输入和下拉输入
设置相同的宽度是否可以阻止 100% 宽度文本框超出其容器？
以下是一些原因：
- 我不能使用块元素
- 输入必须保留其斜面/插图样式，使其看起来像文本框（企业不会喜欢周围有 1px 实心边框的不显眼矩形）
- 没有CSS3（一些用户仍在IE6和IE7上）
- 我不能用神奇的DIV元素包装我们公司网站上的每一个输入。
我发现 <!DOCTYPE> 指令会影响输入上的这种溢出行为。 研究告诉我，如果没有这个指令，浏览器就处于怪癖模式。 我想这就是为什么在怪癖模式下，输入看起来......正确？ 我不明白。
无论如何，这里有一个小提琴：
http://jsfiddle.net/pJkGB/2/
万一腐烂，这是小提琴中的 HTML：
<input id="txtwoo" style="width:300px" type="text" />
<br />
<select id="cbowoo" style="width:300px">
</select>
请注意文本框如何比下拉列表宽。 我希望文本框的外部边界与下拉列表的宽度与像素完全相同（外部边界包括任何边框、边距等）。 下拉列表必须单独保留。 我不想用任何元素包装输入。 我想要一种可以直接应用于文本输入本身的样式，以防止它超出设置的像素宽度。 我希望它保留其斜面/插图样式。
如果这是不可能的，你的回答"你不能这样做"就足以作为一个答案。 否则，请摆弄我的小提琴，让我知道我如何让它工作。
尝试使用：
input{
box-sizing:border-box;
}
如果你想发疯，你甚至可以使用下面的方法来专门归零文本框：
input[type=text]{
box-sizing:border-box;
}
看看这个小提琴