150 + 150이 브라우저에서 300과 같지 않습니까?

StackOverflow https://stackoverflow.com/questions/413653

  •  03-07-2019
  •  | 
  •  

문제

다음 HTML이 있습니다

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <style>
    .box {
        border: solid black 1px;
        padding: 0px;
        margin: 0px;
    }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <input class="box" style="width:300px;" /><br /><!--CRLF for clarity only-->
        <input class="box" style="width:150px;" /><!--CRLF for clarity only-->
        <input class="box" style="width:150px;" /><!--CRLF for clarity only-->
    </form>
</body>
</html>

렌더링되면 텍스트 상자의 두 번째 행이 첫 번째 행에서 1보다 누적으로 길어 보입니다. 스타일 속성을 통한 폭의 명시 적 설정에도 불구하고

왜 이런 일이 일어나고 피할 수 있습니까?

참고 : 이것은 FF3와 IE7에서 동일하게 작동하는 것으로 보입니다.

도움이 되었습니까?

해결책

JHUNTER가 맞습니다. Firefox 용 Firebug가 필요하다고 덧붙입니다. 설치된 상태에서 이것을 빠르게 알아낼 수있었습니다. 관심있는 요소를 검사하고 "레이아웃"탭을보십시오.

다른 팁

너비에 포함되지 않은 텍스트 상자에 테두리가 있습니다.

실제로, 상자의 너비는 왼쪽과 오른쪽 (1px)의 테두리로 +2입니다. 상자 당 2 개의 추가 픽셀이 있음을 의미합니다. 그래서 당신은 +6입니다.

CSS 숙달을 읽는 것이 좋습니다. 다른 브라우저 박스 모델과 많은 차이점과 다른 브라우저에서 레이아웃과 폭에 미치는 영향을 설명합니다.

CSS 숙달

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top