css - 为什么此文本输入不符合我为其设置的样式

Question

我有一个设置了高度和填充的文本输入，但是填充没有生效。它变得更加奇怪。我创建了一个 js fiddle(链接如下)，在 js fiddle 中它工作正常，但是如果我制作一个测试页面并直接在我的浏览器(mac 上的 chrome)中打开它，它会忽略填充。请帮助我已经尝试了所有我能想到的。

顺便说一句。我正在 chrome for mac 上测试这个 http://jsfiddle.net/Jebg3/

更新

我已链接到问题明确的文件。

http://levihoch.com/tests/input.html

更新 2

@truth 建议使用 box-sizing 属性，它在 Opera 中工作得很好，但它在每个版本的 IE 中都有问题。更新后的页面在这里: http://levihoch.com/tests/input.html?v=2

Answer 1

将以下属性添加到您的规则列表中:

box-sizing: content-box;

出于某种原因，Chrome 对其应用了“border-box”，这导致您的 height: 13px; 是根据边框而不是内容计算的。

Here's a great article on the subject, by Chris Coyer @ CSS-Tricks