Question

两种不同的输出，但完全相同的超基本代码：

CSS

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

HTML

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

在 jsFiddle （实时演示here）上生成以下输出，

enter image description here

但 jsBin 中的输出（现场演示here）

enter image description here

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

Answer 1

有两个原因：

这些工具将CSS reset应用于其内容以减少浏览器默认值导致的可变性。将适用不同的工具不同的默认值
具体差异似乎是box-sizing属性。 Jsfiddle与box-sizing: content-box;同时进行 Jsbin将与box-sizing: border-box;

content-box获取宽度，然后添加填充 - 因此增加宽度。 border-box;包括宽度中的填充（和边框）。

如果你打开一个像Firebug（或Inspect Element）这样的调试工具，定位输入框，然后查看Layout选项卡（或等效的），你可以看到发生了什么。

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

Answer 2

区别在于doctype。

来自JS Bin（没有doctype）：

<html>

来自jsFiddle（html5 doctype）：

<!DOCTYPE html>

JS Bin上缺少doctype会导致浏览器进入quirks mode。显然，quirks模式和标准模式对box-sizing属性使用不同的默认值。

Answer 3

jsBin当然是显示正确/预期的输出。

我不能说为什么jsFiddle以这种方式扩展输入字段 - 我甚至无法查看它，你说它很慢，网站甚至不会为我加载。

也许他们目前的问题不仅仅是缓慢/不可用。

如果我是你，我现在只使用jsBin而不用担心它。

编辑： user568458的答案更好。我无法评论，但我认为box-sizing从javascript版本中获取默认值 - 在jsFiddle中可选择不确定jsBin。

假设这是真的，我可以肯定地说1.9.2将填充添加到给定的宽度 - 当我弄乱我的Wordpress布局时，让我难以忍受30分钟。