다른 브라우저에서 패딩을 사용하는 방법은 무엇입니까?

Question

패딩 사용시 이상한 행동이 있습니다.

div가 래퍼로 있습니다.

.wrapper #header #navline #log form .small { 
    height: 25px; 
    width: 180px; 
    padding: 5px 25px; 
} 

나는 다음과 같은 CSS로 입력 필드가 그 래퍼의 :이 래퍼는 양쪽에 25 픽셀의 패딩을 가지고

input[type="text"],[type="password"] { 
    font-size: 10px; 
    width: 180px; 
    height: 18px; 
    line-height: 18px; 
    padding-left: 5px; 
    padding-right: 5px; 
    outline:none; 
} 

및 오류 클래스로 :

input.error { 
    background-image: url(../images/error.png); 
    background-repeat:no-repeat; 
    background-position: 160px 50%; 
    width: 165px; 
    padding-left: 5px; 
    padding-right: 20px; 
    position: absolute; 
    z-index: 3; 
} 

그래서 나는 그것을 올바른 방법으로 설정하는 것을 미쳐 가고 있습니다. 문제는 크롬/사파리와 파이어 폭스가 패딩 속성을 다르게 처리하는 것 같습니다. 예를 들어 height 속성을 chrome/safari에 남겨두면 입력란에 자동으로 덧씌우 기 상단/하단과 같은 것이 있습니다. 파이어 폭스에는 입력 필드의 높이가 다릅니다.

파이어 폭스 : 이미지를 보여

크롬 :

주요 문제는 내가 래퍼 DIV에 입력 필드를 중심으로하고 싶은 것입니다. 입력 폭은 180px 여야합니다. 이는 각면이 25px 남았음을 의미합니다. 텍스트 패딩은 각면에 5 픽셀입니다. 그래서 패딩 속성을 사용할 때 새로운 입력 필드의 너비는 패딩을 뺀 값입니다. 그래서 이것이 첫 번째 질문이 될 것입니다. pading-left 및 padding-right이 5px 인 경우 왼쪽면 + 5px 및 오른쪽 -5px 때문에이 값은 180px (너비 입력 필드) - 10px (패딩) 또는 패딩 0px입니까? 그래서 입력 필드의 정확한 너비가 어떻게됩니까?

두 번째 질문은 오류 클래스에 관한 것입니다. 나는 그림을 추가하고 오른쪽 패딩을 5px에서 20px로 늘리고 싶습니다. 여기서도 질문은 입력 필드의 너비가 무엇입니까? 나는 뒤에 논리가 180px + 5px, -20px는 165px가 될 것이라고 생각했다.

세 번째 질문 : 모든 방법을 시도했지만 결과는 각 브라우저마다 다릅니다. 패딩이 패딩인지 아닌지 내 로직 뒤에 오류가 있습니까?

Answer 1

패딩이있는 모든 요소에 CSS3 크기 조정을 추가하십시오. 문제를 해결할 것입니다.

.text { 
-moz-box-sizing:border-box; 
-webkit-box-sizing:border-box; 
box-sizing:border-box; 
}