두 개의 서로 다른 출력하지만, 정확히 같은 슈퍼 기본 코드 :내 기본 CSS 코드가 jsFiddle 및 jsBin에서 다른 출력을 생성하는 이유는 무엇입니까?
CSS
input {
display: block;
min-width: 200px;
padding: 10px;
}
HTML
<input type="text" />
<input type="text" />
<input type="submit" value="Register" />
는 jsFiddle (라이브 데모에 다음과 같은 출력을 생성 here),
,210
하지만 jsBin이 출력 (라이브 데모 here는)
나는 (어디에서나 같은 차이) 최신 파이어 폭스와 크롬이를 테스트했습니다. 평범한 벌거 벗은 .html 파일에서 jsBin btw처럼 보입니다 ...
차이점은 doctype입니다. JS 빈 (아무 문서 타입)에서
: jsFiddle (HTML5 DOCTYPE)에서<html>
:
<!DOCTYPE html>
JS 빈에 문서 타입의 부족은 quirks mode에 브라우저를 던지고있다. 분명히 버크 모드와 표준 모드는 상자 크기 조정 속성에 다른 기본값을 사용합니다.
. 과 함께 기본 HTML 파일을 사용하여 로컬에서 재현 할 수 있습니다. – Sliq
jsBin은 당연히 올바른/예상 된 출력을 보여줍니다.
jsFiddle이 입력 필드를 확장하는 이유는 말할 수 없습니다. 나는 그것을 볼 수도없고, 천천히 말했고, 웹 사이트는 순간적으로로드되지 않습니다.
아마 현재의 문제는 느리고 사용할 수없는 것보다 큽니다.
저는 지금 jsBin을 사용하고있어 걱정하지 않으려 고합니다.
편집 : user568458의 답변이 더 좋습니다. 내가 말할 수는 없지만 상자 크기 조정은 jsBin에 대해 확실하지 않은 jsFiddle에서 선택할 수있는 javascript 버전의 기본값을 사용한다고 생각합니다.
사실이라고 가정하면, 1.9.2가 주어진 너비에 패딩을 추가한다고 말할 수 있습니다. Wordpress 레이아웃으로 엉망이되어서 30 분 동안 저를 괴롭혔습니다.
두 가지 이유 : 이런
box-sizing 속성 인 것 같습니다. 따라서 여분의 폭 - Jsfiddle가 Jsbin가 box-sizing: border-box;content-box으로가는 box-sizing: content-box; 상태로하려고하는 폭을 얻어, 그 패딩을 추가한다. border-box;에는 너비에 채우기 (및 경계선)가 포함됩니다.
Firebug (또는 Inspect Element)와 같은 디버깅 도구를 열고 입력 상자를 대상으로하고 레이아웃 탭 (또는 이에 상응하는 도구)을 보면 무슨 일이 벌어지는 지 알 수 있습니다.box-sizing 설정이 어디에서 오는지 보조 노트로
box-sizing은 실험적입니다. 고정되어 있고 몇 달 만에 예상했던 것과 같은 결과를 얻는다면 놀라지 않을 것입니다.
doctype을 html5로 설정하면 이러한 설정이 "HTML5에서"온 것 같습니다. 귀하의 답변을 요약하면이 CSS 규칙에 따라이 문제가 해결됩니다 : 상자 크기 : 테두리 상자; -moz-box-sizing : 테두리 상자; -webkit-box-sizing : 테두리 상자; – Sliq
btw jsfiddle이 현재 속도가 느림 ... :( – Sliq
http://www.isitdownrightnow.com/jsfiddle.net.html#commentstop – user568458