html - 非常に基本的な CSS コードが jsFiddle と jsBin で異なる出力を生成するのはなぜですか?

Question

2 つの異なる出力ですが、非常に基本的なコードはまったく同じです。

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 のように見えます...

score 4 · Accepted Answer

違いはDoctypeです。

JS Bin から (Doctype なし):

<html>

jsFiddle (html5 doctype) から:

<!DOCTYPE html>

JS Bin に doctype がないため、ブラウザがクワークモードになります。どうやら、quirks モードと標準モードでは、box-sizing プロパティに異なるデフォルト値が使用されています。

score 1 · Accepted Answer

もちろん、jsBin は正しい/期待される出力を示しています。

なぜjsFiddleが入力フィールドをそのように拡張するのかわかりません.表示することさえできません.遅いとあなたは言いました.ウェブサイトは今のところ読み込まれません.

おそらく、彼らの現在の問題は、単に遅い/利用できないだけではありません。

私があなただったら、今のところ jsBin を使用するだけで、心配する必要はありません。

編集: user568458 の答えの方が優れています。コメントはできませんが、box-sizing は javascript のバージョンからデフォルト値を取ると思います - jsFiddle で選択可能 jsBin については不明です。

これが真実であると仮定すると、1.9.2 が特定の幅にパディングを追加することは確かです。Wordpress のレイアウトを台無しにして、30 分間困惑しました。

3 に答える 3