<! doctype html> 너비 렌더링 입력 요소 입력

입력 텍스트 요소를 렌더링 할 때 문제가 있습니다. 내 파일에 <!doctype html>을 추가하면 입력 요소가 늘어나고 입력 제출 버튼은 늘어나지 않습니다. 몇 가지 다른 브라우저에서 테스트했는데 일관성이 있습니다. 따라서<! doctype html> 너비 렌더링 입력 요소 입력

예제에서 my text 요소의 너비는 304 픽셀로 렌더링됩니다. 첫 번째 줄을 제거하면 300 개 픽셀

예 :.?

는

<!doctype html> 
<html> 
<STYLE type="text/css"> 
    *{ margin: 0px; padding: 0px; } 
    input 
    { 
     width: 300px; 
    } 
</STYLE> 
<body> 
    <input/><br/> 
    <input type="submit"> 
</body> 
</html>

아무도 더 중요한 것은 고정 할 수있는 방법을 원인을 알고 있지만 있나요

출처

2011-04-11 Andre van Heerwaarde

doctype은 무엇입니까? 나는 그것이 유효하다고 생각하지 않는다. 유효한 것을 사용하십시오. – Headshota

@Headshota 그 [html5 doctype] (http://dev.w3.org/html5/spec/syntax.html#the-doctype) – MikeM

@Headshota : 표준 html5 doctype – richzilla

을 해당 문서 타입을 가지고 있지 않은 경우 페이지 렌더링입니다에. 쿼크 모드에서

상기 border 및 input의 padding 300px는 폭 내부 을 계산한다.
당신이 the doctype를 추가
, 당신의 페이지는 표준 모드로 렌더링되고, border 및 padding는 300px의 더 이상 일부 - 「특수는 "4px부터 오는 곳이다.

는 여기를 참조하십시오 : http://www.quirksmode.org/css/box.html

가장 쉬운 방법은 현대의 브라우저에 대한이 box-sizing: border-box 사용하는 것입니다 "수정"을 : 또는

input { width: 300px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

을 명시 적으로 설정할 수 padding 및 border-width 자신, 확인 padding, border-width 및 의 값의 합은 300px까지 가산됩니다.

출처

2011-04-11 20:31:39 thirtydot

명시 적으로 브라우저 특정 코드를 사용하지 마십시오. . – reisio

빠른 응답과 explination을 보내 주셔서 감사합니다. –

<! doctype html> 너비 렌더링 입력 요소 입력

답변

관련 문제