为什么我的极其基本的CSS代码在jsFiddle和jsBin上产生不同的输出？

Question

两个不同的输出,但完全相同的超基本代码:

CSS

input {
  display: block;
  min-width: 200px;
  padding: 10px;
}

HTML

<input type="text" />
<input type="text" />
<input type="submit" value="Register" />

在jsFiddle上生成以下输出(这里是现场演示),

但这个输出在jsBin(这里的现场演示)

我已经在最新的Firefox和Chrome中测试了这一点(各处都有相同的差异).在一个简单的裸.html文件中,它看起来像在jsBin btw ...

Answer 1

两个原因:

1. 像这样的工具将CSS重置应用于其内容,以减少浏览器默认值导致的可变性.不同的工具将应用不同的默认值
2. 具体差异似乎是box-sizing财产.Jsfiddle正在和box-sizing: content-box;Jsbin一起去box-sizing: border-box;

content-box获取宽度,然后添加填充 - 因此额外的宽度.border-box;包括宽度中的填充(和边框).

如果打开像Firebug(或Inspect Element)这样的调试工具,定位输入框,并查看"布局"选项卡(或等效项),您可以看到发生了什么.

作为旁注,我无法确切地看到box-sizing设置的确切位置- 看起来它们没有直接设置,而是由于其他设置而应用.无论是那个还是我都找不到它们......无论哪种方式box-sizing都是实验性的,如果它们被修复并在几个月内给出与预期相同的结果,我也不会感到惊讶.