너비가 100 %로 설정되면 div의 내용이 길어지고 div 자체가 더 길어 집니까?

Question

나는 input 텍스트 상자만을 포함하는 div의 고정 폭을 가지고 은 100%으로 설정됩니다. 나는 그것이 div를 채울 것으로 예상하지만 그 대신 약간 더 길다.

데모 코드 :

HTML :

<div class="container"> 
    <input class="content" id="Text1" type="text" /> 
</div> 

CSS :

.container 
{ 
    width: 300px; 
    height: 30px; 
    border: thin solid red; 
} 
.content 
{ 
    width: 100%; 
} 

결과 (파이어 폭스) :

이 우연 Internet Explorer 8, Chrome, Safari의 펜 ... 오버플로 너비는 브라우저마다 다를 수 있습니다. 콘텐츠를 정확히 div의 너비를 채우도록 만드시겠습니까?

Answer 1

box-sizing: border-box에 기본 그것을 해결하기위한 빠르고 쉬운 방법입니다. http://jsfiddle.net/thirtydot/QkmSk/301/

.content { 
    width: 100%; 
    box-sizing: border-box; 
} 

_{See here 구역질 IE7 호환 방법 :}

여기 데모입니다.

Answer 2

또한 CSS 재설정을 사용자 페이지에 추가하십시오. 입력에 일부 패딩이 추가되었을 수 있습니다!

Answer 3

패딩, 여백 및 경계선을 재설정해야합니다. 사이트 전체에 적용하려면 에릭 메이어 (Eric Meyer 's)와 같은 리셋 CSS를 사용할 수 있습니다. http://meyerweb.com/eric/tools/css/reset/

또는 직접 작성할 수도 있습니다.

이 will work in all modern browsers

하고, IE8 + : 그냥 자신의 값

Answer 4

코드를 사용할 때 Firefox에 잘 표시됩니다. 구체적으로 문제가 있다고 생각됩니다. http://htmldog.com/guides/cssadvanced/specificity/

또는 주변 html에 문제가 있습니다. 나는. 닫히지 않은 태그.

해당 CSS와 HTML을 일반 파일에 넣어 올바르게 표시되는지 확인해보십시오. 그렇다면 부모 요소의 CSS 속성을 살펴 보는 것이 좋습니다.

아직 다운로드하지 않은 경우 Firefox 용 Web Developer Toolbar를 다운로드 한 다음 CTRL + SHIFT + F를 사용하여 클릭 가능한 요소 속성 표시를 활성화하십시오. 이것은 무슨 일이 일어나고 있는지 디버깅하는 데 도움이 될 것입니다.

희망이 도움이됩니다.