CSS를 통해 할당 된 너비 값을 브라우저가 바꾸는 이유는 무엇입니까?

모든 선택 항목에 기본 스타일을 지정하면 예.CSS를 통해 할당 된 너비 값을 브라우저가 바꾸는 이유는 무엇입니까?

width: 300px; 
padding: 0; 
margin: 0; 
border-width: 1px;

다른 상황에서 자바 스크립트를 통해 너비를 검색 할 때 예기치 않은 결과가 발생합니다.

선택
함께 (가) 298px하다 볼 수있다.
선택 화면이다 : 없음 폭이기도 298px (FF, JQuery와)를 디스플레이와 DIV에 선택하면

: 없음 폭이 올바른지 300 픽셀.

는 (: 박스 크기 : 결과는 같은 할당입니다 경계 박스)

글쎄, 검색된 폭이 때때로 사용되는 브라우저와 자바 스크립트 프레임 워크에서 차이가 있지만, 모든 모든 난 그냥 원하는 지정된 너비 (300 픽셀)를 검색 할 수 있어야합니다. 는 (나는 여기에 언급 된 "공식 이상한 것들"함께 할 수있는 뭔가를 가지고 추측 : http://meyerweb.com/eric/thoughts/2007/05/15/formal-weirdness/하지만 브라우저는 사용자 ?? 할당 폭을 사용하지 않을 이유)

어떻게 할당 폭을 검색 할 수 있습니다? 실제로 그것을 할 수있는 방법이 있습니까?

예 :

http://jsfiddle.net/ETCcH/5/

(뷰와 다른 브라우저로 시도) 당신은 결코 것

출처

2012-05-25 Marc

을 (jQuery를 사용하거나 대체 (5) 4와 함께 Mootools의를 사용하여 예를 들어 용) 값은 CSS 파일에 기록됩니다. JavaScript를 사용하면 웹 브라우저에서 해당 요소에 현재 적용된 CSS 속성 만 가져옵니다.

너비가 실제로 고정되어 있으면 최대 폭을 300px로 설정하거나 "overflow: hidden"을 추가 할 수 있습니다 (옵션 인 경우).

출처

2012-05-25 09:40:02 acme

브라우저 상자 크기가 기본적으로 선택 요소의 테두리 상자로 보입니다. 상자 크기를 넣으십시오. content-box; select 및 jquery에서 올바른 결과를 얻을 수 있습니다.

Jquery는 '너비'메서드로 내용 너비를 가져와 여백, 채우기 및 테두리를 가져옵니다. box-sizing : border-box, 주어진 넓이는 채우기와 테두리를 고려합니다.

Ernoriel

출처

2012-05-25 09:45:43 Ernoriel

실제로 문제를 일으키는 경계입니다. 테두리 너비를 0으로 설정하면 모두에게 300px를 볼 수 있습니다. 실제로 브라우저는 예상대로 요소의 너비를 300px로 설정하고 테두리를 추가합니다. 보이는 요소의 경우 offsetWidth (표시를 none으로 설정하면 0으로 설정 됨)를 사용하여 요소의 전체 너비를 얻을 수 있습니다.

출처

2012-05-25 10:01:51 mmg666

CSS에서 지정된 값에 액세스하는 간단한 방법은 없습니다.

jQuery에서 .css()을 사용하면 computed value이 표시됩니다. 당신이 쫓고있는 것은 specified value입니다.

지정한 값이 으로 계산되면 상황에 따라 조정됩니다 (예 : 피들, 테두리). 이것이 폭이 다른 이유입니다. 부모 div 내에서 숨겨진 선택이 테두리에 맞지 않는 이유는 모르겠습니다.

해결책 1 : 요소의 지정된 값을 얻는 것보다 더 좋은 방법은 부모의 너비를 찾는 것입니까? 어쨌든 특정 요소에 너비를 사용하지 않는 것이 좋은 방법 인 것을 보는 것 (예 : 그리드 시스템 또는 이와 유사한 방법을 사용하는 경우와 같이 부모의 경우)이 방법이 좋습니다. 부모에 너비를 사용하면 자식의 최대 폭을 효과적으로 제한 할 수 있습니다.

솔루션이 : 당신이 정말 지정된 값을 원하는 경우 지금, 나는 당신이 값을 '을 (를) 찾을 때까지 당신이 cssRules 속성에 액세스, document.styleSheets을 통해 모든 스타일 시트 가서 아래로 당신의 방법을 일할 수있는 가정 다시 찾고. Chrome에서이 작업을 시도했을 때 cssRules은 비어 있지만 Firefox가이 항목을 채우고 페이지에 첨부 된 모든 스타일 시트에 모든 스타일을 순박하게 나열합니다.

나는 그것을 권장하지 않습니다,하지만 당신은 그 구멍을 아래로 이동하기로 결정한 경우, 당신은이 SO 질문 중 하나에 관심이있을 수 :

I box-sizing을 변경하는 것이 좋습니다. 원하는 값을 얻을 수 있지만 요소의 실제 너비는 넓어집니다 (기본 너비 300px + 테두리 = 302px 너비).

당신의 보트가 떠돌아 다닐 필요가 없다면, 당신이하고 싶은 일과 이유에 대해 생각하고 생각해보십시오. 간단한 작업을 위해 비표준 작업을 원할 때마다 내 솔루션이 최적이 아니기 때문에 드문 경우는 아니며 계속 진행하기 전에 약간 축소해야합니다.

출처

2012-05-25 10:13:40

CSS를 통해 할당 된 너비 값을 브라우저가 바꾸는 이유는 무엇입니까?

답변

관련 문제