예상대로 줄어들지 않는 이유는 무엇입니까? 제거할 수 없는 min-width: min-content 문제가 있는 것 같습니다.
- Barbara Streisand원래의
- 2024-11-09 22:44:02664검색
이 있는 것 같습니다. 문제
예상 결과
실제 결과
해결 방법
업데이트됨(2017년 9월 25일)
아래에 설명된 Firefox 버그는 Firefox 53에서 수정되었으며 이 답변에 대한 링크는 Bootstrap 문서에서 제거되었습니다.
또한 이 답변으로 인해 부분적으로 -moz-document에 대한 지원 제거를 차단해야 했던 Mozilla 기여자들에게 진심으로 사과드립니다.
수정
WebKit 및 Firefox 53에서는 필드 세트에 min-width: 0;을 설정하여 min-content의 기본값을 재정의할 수 있습니다. ¹
Firefox는 필드셋에 있어서 조금 이상합니다. 이전 버전에서 이 작업이 제대로 작동하도록 하려면 필드 세트의 표시 속성을 다음 값 중 하나로 변경해야 합니다:
- table-cell (권장)
- 테이블-열
- 테이블-열-그룹
- 테이블-바닥글-그룹
- 테이블-헤더-그룹
- 테이블-행
- 테이블-행-그룹
그 중에서도 테이블-셀을 추천드려요. table-row와 table-row-group 모두 너비 변경을 방지하고, table-column과 table-column-group은 높이 변경을 방지합니다.
이것은 (다소 합법적으로) IE의 렌더링을 중단시킵니다. Gecko만이 이 작업을 수행하면 되므로 Mozilla의 독점 CSS 확장 프로그램인 @-moz-document 중 하나를 사용하여 다른 브라우저에서 이 효과를 합법적으로 숨길 수 있습니다.
@-moz -document url-prefix() {</p>
<pre class="brush:php;toolbar:false">fieldset {
display: table-cell;
}
}
(이것은 jsFiddle 데모입니다.)
왜냐면
이렇게 하면 문제가 해결되는데 저 같으면 반응이 아마...
뭐?
이유가 있지만 이해하기 쉽지 않습니다.
fieldset 요소의 기본 렌더링은 터무니없으며 CSS에서 지정하는 것이 본질적으로 불가능합니다. 생각해 보세요. 범례 요소와 겹치는 부분에서 필드 세트의 테두리가 사라지지만 배경은 계속 표시됩니다! 다른 어떤 요소 조합도 이 효과를 재현할 수 없습니다.
가장 중요한 점은 기존 동작에 대한 양보가 많이 구현되어 있다는 것입니다. 그 중 하나는 필드 세트의 최소 너비가 해당 콘텐츠의 기본 너비보다 작지 않다는 것입니다. WebKit은 기본 스타일시트에 이를 지정하여 이 동작을 재정의하는 방법을 제공하지만 Gecko²는 한 단계 더 나아가 렌더링 엔진에서 이 동작을 강제합니다.
그러나 Gecko에서는 내부 테이블 요소가 특별한 프레임 유형을 구성합니다. 이러한 표시 값 설정을 사용하여 요소의 크기 제약 조건을 계산하는 것은 별도의 코드 경로에 있으며 필드 세트에 적용되는 최소 너비를 완전히 우회합니다.
다시 말하지만, Firefox 53에는 이 문제에 대한 버그 수정이 있으므로 최신 버전만 대상으로 하는 경우에는 이 수정이 필요하지 않습니다.
@-moz-document를 사용해도 안전한가요?
이 문제는 안전합니다. @-moz-document는 모든 버전의 Firefox에서 예상대로 작동합니다(이 버그가 수정된 53까지).
이것은 우연이 아닙니다. 부분적으로 이 답변으로 인해 @-moz-document를 사용자/UA 스타일시트로 제한하는 버그는 먼저 수정되는 기본 필드 세트 버그에 의존하도록 설정되었습니다.
또한 다른 리소스에서 그렇게 하고 있음에도 불구하고 Firefox를 대상으로 하는 CSS에서 @-moz-document를 사용하지 마세요. ³
위 내용은 예상대로 줄어들지 않는 이유는 무엇입니까? 제거할 수 없는 min-width: min-content 문제가 있는 것 같습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!