1

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

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 上......

4

3 回答 3

5

两个原因：

  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都是实验性的，如果它们被修复并在几个月内得到与预期相同的结果，我不会感到惊讶。

于 2013-07-05T16:48:53.267 回答
4

不同之处在于文档类型。

来自 JS Bin（无文档类型）：

<html>

来自 jsFiddle（html5 文档类型）：

<!DOCTYPE html>

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

于 2013-07-05T17:04:04.443 回答
1

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

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

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

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

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

假设这是真的，我可以肯定地说 1.9.2 为给定的宽度添加了填充 - 当它与我的 Wordpress 布局混淆时，我被难住了 30 分钟。

于 2013-07-05T16:22:58.740 回答