Why does my extremely basic CSS code produce different outputs on jsFiddle and jsBin?

只愿长相守 提交于 2019-12-08 08:32:27

问题


Two different outputs, but exactly the same super-basic code:

CSS

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

HTML

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

produces the following output on jsFiddle (live demo here),

but this output in jsBin (live demo here)

I have tested this in latest Firefox and Chrome (same differences everywhere). In a plain naked .html file, it looks like on jsBin btw...


回答1:


The difference is the doctype.

From JS Bin (no doctype):

<html>

From jsFiddle (html5 doctype):

<!DOCTYPE html>

The lack of a doctype on JS Bin is throwing the browser into quirks mode. Apparently quirks mode and standards mode use a different default value for the box-sizing property.




回答2:


Two reasons:

  1. Tools like these apply a CSS reset to their content to reduce variability caused by browser defaults. Different tools will apply different defaults
  2. The specific difference seems to be the box-sizing property. Jsfiddle is going with box-sizing: content-box; while Jsbin is going with box-sizing: border-box;

content-box takes the width, then adds the padding - hence the extra width. border-box; includes the padding (and border) in the width.

You can see what's going on if you open up a debugging tool like Firebug (or Inspect Element), target the input box, and look at the Layout tab (or equivalent).


As a side note, I can't see exactly where the box-sizing settings are coming from - it looks like they're not being set directly but are being applied as a result of another setting. Either that or I just can't find them... either way box-sizing is rather experimental, I wouldn't be surprised if they're fixed and giving the same result as expected in a few months.




回答3:


jsBin is of course showing the correct/expected output.

I can't say why jsFiddle extends the input fields in that way - I cannot even view it, you said it was slow, the website won't even load for me at the moment.

Perhaps their current issues are greater than just slow/unavailability.

If I were you I'd just use jsBin for now and not worry about it.

Edit: user568458's answer is better. I can't comment, but I think box-sizing takes a default value from the version of javascript - selectable in jsFiddle not sure about jsBin.

Assuming this is true, I can say for sure 1.9.2 adds padding to a given width - had me stumped for a good thirty minutes when it messed with my Wordpress layout.



来源:https://stackoverflow.com/questions/17493145/why-does-my-extremely-basic-css-code-produce-different-outputs-on-jsfiddle-and-j

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!