Fatal编程技术网
  • html/
  • Html 为什么我极其基本的CSS代码在JSFIDLE和jsBin上产生不同的输出？

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

html css

Html 为什么我极其基本的CSS代码在JSFIDLE和jsBin上产生不同的输出？,html,css,jsfiddle,jsbin,Html,Css,Jsfiddle,Jsbin,两种不同的输出，但完全相同的超级基本代码： CSS input { display: block; min-width: 200px; padding: 10px; } HTML <input type="text" /> <input type="text" /> <input type="submit" value="Register" /> 在JSFIDLE（实时演示）上生成以下输出 但是这个输出在jsBin（实时演示）中 我已经

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

CSS

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

<input type="text" />
<input type="text" />
<input type="submit" value="Register" />
在JSFIDLE（实时演示）上生成以下输出

但是这个输出在jsBin（实时演示）中

我已经在最新的Firefox和Chrome上测试了这一点（各地都有相同的差异）。
在一个普通的裸体.html文件中，它看起来像是在jsBin上，顺便说一句。

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

我说不出为什么JSFIDLE会以这种方式扩展输入字段——我甚至不能查看它，你说它很慢，网站现在甚至不能为我加载

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

如果我是你，我现在就用jsBin，不用担心

编辑： user568458的答案更好。我不能评论，但我认为框大小是从JSFIDLE中的javascript版本中获取的默认值，jsBin不确定

假设这是真的，我可以肯定地说1.9.2在给定的宽度上添加了填充-当它扰乱了我的Wordpress布局时，我被难住了整整三十分钟。

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

我说不出为什么JSFIDLE会以这种方式扩展输入字段——我甚至不能查看它，你说它很慢，网站现在甚至不能为我加载

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

如果我是你，我现在就用jsBin，不用担心

编辑： user568458的答案更好。我不能评论，但我认为框大小是从JSFIDLE中的javascript版本中获取的默认值，jsBin不确定

假设这是真的，我可以肯定地说1.9.2增加了一个给定宽度的填充-当它扰乱我的Wordpress布局时，我被难住了整整三十分钟。

两个原因：

  • 像这样的工具对其内容应用了 浏览器默认值引起的变化。不同的工具将适用 不同的默认值
  • 具体的区别似乎是财产。JSFIDLE将使用
    框大小：内容框当
Jsbin将使用
    框大小：边框框
    • 内容框
    获取宽度，然后添加填充，从而获得额外的宽度<代码>边框框包括宽度中的填充（和边框）

    如果打开诸如Firebug（或Inspect Element）之类的调试工具，以输入框为目标，并查看布局选项卡（或等效项），您可以看到发生了什么

    作为旁注，我看不出
    框大小设置的确切来源-看起来它们不是直接设置的，而是作为另一个设置的结果应用的。要么我就是找不到他们。。。无论哪种方法，盒子大小都是实验性的，如果它们被修复并在几个月内产生与预期相同的结果，我不会感到惊讶。
    两个原因：
    

  • 像这样的工具对其内容应用了
浏览器默认值引起的变化。不同的工具将适用
不同的默认值
    • 

  • 具体的区别似乎是财产。JSFIDLE将使用
    框大小：内容框当
Jsbin将使用
    框大小：边框框
    • 

    内容框
    获取宽度，然后添加填充，从而获得额外的宽度<代码>边框框包括宽度中的填充（和边框）
    
如果打开诸如Firebug（或Inspect Element）之类的调试工具，以输入框为目标，并查看布局选项卡（或等效项），您可以看到发生了什么
    

    

    作为旁注，我看不出
    框大小设置的确切来源-看起来它们不是直接设置的，而是作为另一个设置的结果应用的。要么我就是找不到他们。。。无论是哪种方式，
    box size
    都是实验性的，如果它们被修复并在几个月内给出与预期相同的结果，我不会感到惊讶。
    区别在于doctype
    
来自JS Bin（无doctype）：
    

    

    
来自JSFIDLE（html5 doctype）：
    

    

    

    JS-Bin上缺少doctype使浏览器陷入困境。显然，“怪癖”模式和“标准”模式对框大小属性使用了不同的默认值。
    不同之处在于doctype
    
来自JS Bin（无doctype）：
    

    

    
来自JSFIDLE（html5 doctype）：
    

    

    

    JS-Bin上缺少doctype使浏览器陷入困境。显然，“怪癖”模式和“标准”模式对框大小属性使用了不同的默认值。
    btw JSFIDLE当前速度非常慢…：（顺便说一句，JSFIDLE目前速度非常慢…：（回答得好！谢谢。我可以用一个基本html文件在本地复制这个，有没有
    。这和你说的一模一样。回答得好！谢谢。我可以用一个基本html文件在本地复制这个，有没有
    。这和你说的一模一样。那些设置似乎来了通过将doctype设置为HTML5，“来自HTML5”。总结您的答案，此css规则将解决此问题：
    框大小：边框框；-moz框大小：边框框；-webkit框大小：边框框；
    这些设置似乎来自HTML5“通过将doctype设置为html5。总结您的答案，此css规则将解决此问题：
    框大小：边框框；-moz框大小：边框框；-webkit框大小：边框框；
    

    <html>

    

    <!DOCTYPE html>