부모의 div보다 100 % 너비가 더 크다

나는 스레드 목록에서 모든 스레드의 너비는 100 %이지만 스레드는 부모보다 큽니다.하지만 스레드 경계를 제거하면 부모의 div에 맞을 것이다. 그래서이 문제가 국경에 있다고 생각합니다.부모의 div보다 100 % 너비가 더 크다

당신은 더 나은에 jsfiddle

<body> 
    <div class="after-body"> 
     <div class="body-wrapper"> 
      <div class="threadlist"> 
        <ol class="threads"> 
         <li class="threadbit"><div class="thread"></div></li> 
         <li class="threadbit"><div class="thread"></div></li> 
        </ol> 
      </div> 
     </div> 
    </div> 
</body>

출처

2013-08-03 AmirHosein KazemNejad

문제는 여기 (스레드가 검은 색 테두리와 흰색 모양 임) width 텍스트와 내부 영역의 크기, 테두리 패딩이 있다는 것을 볼 수있다 그 주위에 "포장"되어 있습니다. 그 명세는 이해가되지 않지만, 대부분의 최신 브라우저가이를 따른다.

구세주는 box-sizing: border-box;입니다. 여기

.threadbit .thread { 

    /* ... some stuff ... */ 

    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
    -moz-box-sizing: border-box; /* Firefox, other Gecko */ 
    box-sizing: border-box;   /* Opera/IE 8+ */ 
}

봐 :이 속성 here 및 here에 jsFiddle

더 많은 정보를 원하시면.

출처

2013-08-03 09:31:00 MightyPork

네가 맞아, 테두리가 요소의 "너비"밖으로 밀어 내고있다. 최신 브라우저의 기본값은 box-sizing입니다. 그렇게 당신이하고 있습니다 당신이 원하는 지원, 당신은 대체 솔루션 또는 디자인을 찾을 필요가 있습니다 무엇을 따라 IE8 이하로 지원되지 않습니다

.threadbit .thread { 
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
    -moz-box-sizing: border-box; /* Firefox, other Gecko */ 
    box-sizing: border-box;   /* Opera/IE 8+ */ 
}

참고 :이 같은 선언으로 대부분 수정할 수 있습니다.

내 원래의 대답 및 브라우저 지원이 약간 변경했기 때문에 그것은 잠시왔다

편집 할 수 있습니다. Firefox 29, Chrome 10, Safari 5.1 및 Internet Explorer 8 이상은 모두 box-sizing을 지원하지 않지만 특정 버전의 알려진 문제점은 몇 가지 있습니다.

목록은 caniuse.com 그러나 여기에 내가 사이트에서 중요한 발견 몇 사람입니다 볼 수 있습니다 최신/전체 :

IE8 : 최소/최대 너비/높이를 사용하는 경우 box-sizing: border-box를 무시
IE8은 : box-sizing가 border-box
IE9 설정 되더라도 min-width 속성 content-box에 적용 position: absolute 및 overflow: auto로 설정할 때, 스크롤 바의 폭이 소자 폭으로부터 감산 또는

IE8 및 IE9의 시장 점유율이 감소함에 따라, 이러한 문제 및 기타 문제는 향후 문제가되지 않을 것입니다.

출처

2013-08-03 09:31:12 Turnerj

Ctrl + C 마스터에 대한 링크입니다,하지만 그는 텍스트 영역 스타일링 아니에요 : http://css-tricks.com/box-sizing/ – MightyPork

분명히 통해 P에 @를! 바이올린에 대한 링크 만 게시 한 후 내 대답을 여러 번 편집하는 것은 아닙니다. ;) 질문을하는 사람에게 연습 및 학습의 일부 요소가 될 수있게되었습니다. – Turnerj

아 그래,하지만 복사 된 스 니펫에서'textarea'를'.threadbit .thread'로 바꾸는 것이 틀림 없습니까? – MightyPork

너비를 확인하는 요소가 firefox 개발자 도구 또는 크롬의 메트릭스 상자의 상자 모델을 통해 문제가 발생하는 경우 항상주의하십시오. 그와 항상 좋은 생각은

*, *:before, *:after { 
     -moz-box-sizing: border-box; 
     -webkit-box-sizing: border-box; 
     box-sizing: border-box; 
    }

는 또한 디스플레이 속성을 확인해야합니다 포함합니다.요소가 인라인으로 표시되면 폭은 채우지 않으며 채우기 값은 &이고 인라인 블록으로 표시되면 너비는 채우기 여백 & 패딩입니다. 여기

상자 크기 조정 부동산 http://www.paulirish.com/2012/box-sizing-border-box-ftw/

출처

2013-08-03 09:56:57

부모의 div보다 100 % 너비가 더 크다

답변

관련 문제