问题
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:
- Tools like these apply a CSS reset to their content to reduce variability caused by browser defaults. Different tools will apply different defaults
- The specific difference seems to be the box-sizing property. Jsfiddle is going with
box-sizing: content-box;
while Jsbin is going withbox-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