Question

我意识到<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的正确行为吗？是否存在跨浏览器解决此问题的方法？

Answer 1

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

标准中并没有真正说明如何通过CSS控制表单字段装饰。最初它们被实现为OS小部件，在这种情况下，边框大小调整是有意义的。后来的浏览器迁移到使用CSS border / padding / etc.渲染小部件本身，在这种情况下，内容框大小调整是有意义的。某些浏览器（IE）将表单字段混合为两者，这意味着您最终可能会选择不与文本字段对齐的选择框。

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

关于您可以做的最好的事情是告诉浏览器使用CSS3手动调整您想要的大小：

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

（在怪癖或兼容模式下，无法在IE6 / 7或IE8上运行。）

Answer 2

您有两种方法可以解决此问题 1）如果您为输入编写css代码，它适用于每个输入元素。而不是使用它来替换其中一个，只针对特定类型

input[type="submit"],input[type="text"]
{
    border: 5px solid #808080;
    padding:0px;
    background-color:#C0C0C0;
    width:20em;
}

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

.MySubmit
{
    border: 5px solid #808080;
    padding:0px;
    background-color:#C0C0C0;
    width:20em;
}

并像

一样使用它

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

我希望这会有所帮助。

Answer 3

只有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;}

由于 Muhammad Atif Chughtai

Answer 4

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

将边距和填充设置为0.这样可以提供最小的＆＃34;自然＆＃34;框。
将vertical-align设置为middle。这会补偿padding = 0以获得高于/低于文本的空格。
使用高度/宽度控制文本和按钮的尺寸。文本高度必须比字体高度大几个像素（以覆盖默认的框尺寸）。按钮的高度必须比文本大2个像素（由于文本和按钮框模型之间的差异）。

示例：

input { margin:0; padding:0; border:solid 1px #888; vertical-align:middle; height:30px; }
input[type="submit"] { height:32px; }

<input type =“submit”/>和<input type =“text”/>之间的盒子模型不一致

4 个答案: