10

我意识到<input type="submit"/>有一个border-box盒子模型，而<input type="text"/>有一个content-box盒子模型。此行为存在于 IE8 和 FF 中。不幸的是，这使我无法将这种样式应用于大小均匀的输入：

input, textarea
{
    border: 5px solid #808080;
    padding:0px;
    background-color:#C0C0C0;
    width:20em;
}

这是 IE 和 FF 的正确行为吗？是否有解决此问题的跨浏览器方法？

4

4 回答 4

17

这是 IE 和 FF 的正确行为吗？

标准中并没有真正说明表单字段装饰是如何由 CSS 控制的。最初它们是作为 OS 小部件实现的，在这种情况下，边框大小是有意义的。后来的浏览器迁移到使用 CSS 边框/填充/等来呈现小部件本身，在这种情况下，内容框的大小将是有意义的。一些浏览器 (IE) 将表单字段呈现为两者的混合，这意味着您最终可能会看到选择框与文本字段不对齐。

是否有解决此问题的跨浏览器方法？

您能做的最好的事情是使用 CSS3 手动告诉浏览器您想要的大小：

box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;

（在 IE6/7 或 IE8 上在 quirks 或兼容模式下不起作用。）

于 2009-09-20T09:19:17.400 回答
1

你有两个选择来解决这个问题 1）如果你为输入编写 css 代码，它适用于每个输入元素。而不是将它用于其中一个，只为特定类型做

输入[类型=“提交”]，输入[类型=“文本”]
{
    边框：5px 实心 #808080;
    填充：0px；
    背景颜色：#C0C0C0;
    宽度：20em；
}

2）我总是在重置已知标签名称后使用类声明。

.MySubmit
{
    边框：5px 实心 #808080;
    填充：0px；
    背景颜色：#C0C0C0;
    宽度：20em；
}

并像使用它一样

<input type="submit" class="MySubmit" />

我希望这有帮助。

于 2009-09-20T09:05:10.887 回答
0

有一个仅适用于它的 css 修复程序

div.search input[type="text"] { width: 110px; margin: 0; background-position: 0px -7px; text-indent:0;  padding:0 15px 0 15px; }
/*ie9*/ div.search input[type="text"] {   border-left: 25px solid transparent; }
/*ie8*/ div.search input[type="text"] {   border-left: 25px solid transparent; background-position-x: -16px; padding-left: 0px; line-height: 2.5em;}

感谢穆罕默德·阿提夫·楚格泰

于 2013-03-14T11:54:46.347 回答
0

我使用这个 CSS 解决方案来获得相同的按钮和文本高度；它适用于 IE、FF 和 Chrome。基本上，这个想法是强制输入元素的高度大于默认框高度。对文本和按钮执行此操作：

  • 将边距和内边距设置为 0。这会给出尽可能小的“自然”框。
  • 将垂直对齐设置为中间。这补偿了 padding=0 以获得文本上方/下方的空白。
  • 使用高度/宽度来控制文本和按钮的尺寸。文本高度必须比字体高度大几个像素（以覆盖默认框尺寸）。按钮的高度必须比文本大 2 个像素（由于文本和按钮框模型之间的差异）。

例子：

input { margin:0; padding:0; border:solid 1px #888; vertical-align:middle; height:30px; }
input[type="submit"] { height:32px; }
于 2014-10-10T19:03:18.990 回答