css - 将 <input type ="text"/> 保持在 100% 的宽度，以免在没有 HTML hack 的情况下溢出其容器，并使其看起来仍然像一个文本框？

Question

首先，我在主题中说“没有 HTML hacks”，因为我没有足够的空间将所有这些 hacks 放在一行中。

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

CSS Input with width: 100% goes outside parent's bound
How to set the same width for HTML text input and drop down input
Can I stop 100% Width Text Boxes from extending beyond their containers?

原因如下:

• 我不能使用 block 元素
• 输入必须保留其斜 Angular/插入样式，使其看起来像一个文本框(业务不会喜欢周围有 1 像素实心边框的不起眼矩形)
• 没有 CSS3(一些用户仍在使用 IE6 和 IE7)
• 我不能用神奇的 DIV 元素包装我们公司网站上的每一个输入。

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

无论如何，这是一个 fiddle :

http://jsfiddle.net/pJkGB/2/

如果出现腐烂，这里是该 fiddle 中的 HTML:

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

请注意文本框比下拉列表宽。我希望文本框的外部边界 与下拉菜单的宽度完全相同，一直到像素(外部边界包括任何边框、边距等)。下拉菜单必须单独放置。我不想用任何元素包装输入。我想要一种可以直接应用于文本输入本身的样式，以防止它超出设置的像素宽度。我希望它保留其斜面/嵌入样式。

如果这是不可能的，你的回答“你不能这样做”就足够了。否则，请摆弄我的 fiddle ，让我知道如何让它工作。

Answer 1

尝试使用:

input{
    box-sizing:border-box;
}

如果你想发疯，你甚至可以使用下面的方法专门在文本框上归零:

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

看看这个fiddle