保持<input type ="text"/> 100%宽度不会溢出其容器而不使用HTML hacks并使其看起来像文本框？

Question

首先,我在主题中说"没有HTML黑客",因为我没有足够的空间将所有这些黑客放在一行上.

我遇到了这些问题,但它们不能满足我的需求:

以下是一些原因:

我发现该<!DOCTYPE>指令会影响输入上的这种溢出行为.研究告诉我,如果没有这个指令,浏览器就处于怪异模式.我猜这就是为什么,在怪癖模式下,输入看起来......正确吗？我不明白.

无论如何,这是一个小提琴:

如果腐烂,这里是那个小提琴中的HTML:

<input id="txtwoo" style="width:300px" type="text" />
<br />
<select id="cbowoo" style="width:300px">
</select>

注意文本框比下拉列表更宽.我希望文本框的外边界与下拉列表的完全相同的宽度一直到像素(外边界包括任何边框,边距等).下拉列表必须保持不变.我不想用任何元素包装输入.我想要一种可以直接应用于文本输入本身的样式,这样可以防止它超出设置的像素宽度.我希望它保持斜角/插入样式.

如果这是不可能的,你的答案"你不能这样做"就足以作为答案了.否则,请摆弄我的小提琴,让我知道如何让这个工作.

Answer 1

尝试使用:

input{
    box-sizing:border-box;
}

如果你想坚持下去,你甚至可以使用下面的文本框特别注明:

input[type=text]{
    box-sizing:border-box;
}

看看这个小提琴