3

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

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

宽度为 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>

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

如果这是不可能的,那么您对“您不能这样做”的回答就足够了。否则,请摆弄我的小提琴,让我知道如何让它工作。

4

1 回答 1

7

尝试使用:

input{
    box-sizing:border-box;
}

如果您想发疯,您甚至可以使用以下内容专门将文本框归零:

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

看看这个小提琴

于 2013-11-14T14:16:17.227 回答