<input type =“submit”/>和<input type =“text”/>

之间的框模型不一致我意识到<input type="submit"/>有一个border-box框模型，而<input type="text"/>有一个content-box框模型。这种行为存在于IE8和FF中。不幸的是，这让我无法将这种风格很好的均匀大小的输入：<input type =“submit”/>和<input type =“text”/>

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

是由IE和FF这个正确的行为？有没有一个跨浏览器解决这个问题的方法？

来源

2009-09-20 Eric

这也是Chrome浏览器的情况下，所以我认为必须假定这一行为ALS“设计”。 Chrome在调试器中显示它是“用户代理样式”，它显示： 'input：not（[type =“image”]），textarea - border-box' – Rolf

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

在标准中，表单字段装饰是如何由CSS控制的，并没有真正说明。最初他们被实现为操作系统小部件，在这种情况下，边界框大小将有意义。后来的浏览器迁移到使用CSS边界/ padding /等渲染小部件，在这种情况下，内容框大小将有意义。某些浏览器（IE）将表单字段渲染为两者的混合，这意味着您最终可以选择与文本字段不匹配的框。

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

关于你能做的最好的就是告诉它你上浆想手动使用CSS3的浏览器：

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

（不能在IE6/7，IE8或怪癖或兼容模式时工作。）

来源

2009-09-20 09:19:17 bobince

IE 6/7/8在怪癖模式中总是使用边框盒模型。 –

所以我们已经走完了。它需要17年的Internet Explorer怪异模式抨击;但我们正在回到最初的Netscape模型*叹息* –

你有两个选择，如果你写输入CSS代码来解决这个问题 1），它适用于所有的输入element.Instead使用此为他们的埃弗特之一，只为特定类型的

 
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" />

我希望这有助于。

来源

2009-09-20 09:05:10 Myra

不知道ie6是否支持这些选择器 –

有一个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;}

感谢穆罕默德与Atif Chughtai

来源

2013-03-14 11:54:46 user2169658

今天，您不必再为填充技巧而烦恼了，因为相关的浏览器了解盒子大小的标签。你可以指定边界框和内容框来声明你想要的模型。你只需要记住输入（除了type = image）和textarea默认是边框。 – Rolf

我已经使用这个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-10 19:03:18 Lambtron

<input type =“submit”/>和<input type =“text”/>

回答

相关问题