html - CSS:提交按钮看起来比文本输入和文本区域小

标签 html css styles

我刚刚注意到这种非常简单的形式的奇怪呈现。

这是我的标记/CSS:http://jsfiddle.net/a9PLM/

如您所见,文本字段和按钮具有相同的样式,但它们的大小却大不相同。

为什么会这样?

谢谢!

最佳答案

这是因为 <input type="submit"> 使用的盒子模型不同和 <input type="text">/<textarea> .您可以通过使用 CSS 指定它们来使盒子模型相同:

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

您可以在这里阅读更多关于盒子模型的信息:http://www.quirksmode.org/css/box.html

我编辑了你的 jsFiddle 来展示它的工作:jsFiddle demo

关于html - CSS:提交按钮看起来比文本输入和文本区域小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7543247/

相关文章:

php - 服务器可以在不更改网页代码的情况下强制浏览器等待吗?

jquery - 使用 jquery 取消隐藏时,fontawesome 图标不旋转

html - 直接从链接下载图片

css - 在 li-class 中使用 sprite png 并在 div 中显示

wpf - 根据网格的列宽更改矩形填充

php - 更新div中的数据

html - 使 HTML 表格单元格优先于其他单元格

html - Safari 7 中搜索取消按钮的位置

html - 为什么不是位置 :sticky with left:0 working inside a scrollable container?

css - 如何使用 scss 为元素声明两个类