[html] <fieldset>의 크기가 잘못되었습니다. `min-width : min-content`를 제거 할 수없는 것으로 보입니다

Html / 글쓴이

문제

나는이 <select>그 중 한 곳 <option>의 텍스트 값이 매우 깁니다. <select>표시된 텍스트를 잘라 내야하더라도 크기를 조정하여 부모보다 넓지 않게 하고 싶습니다 . max-width: 100%그렇게해야합니다.

크기를 조정하기 전에 :

<code> select </ code> 전체를 보여주는 크기 조정 전의 페이지

크기 조정 후 원하는 것 :

<code> select </ code>로 내용을 클리핑하여 크기를 조정 한 후 원하는 페이지

그러나이 jsFiddle 예제 를 로드 하고 결과 패널의 너비를의 너비보다 작게 조정하면 <select>내부의 선택 영역 <fieldset>이 너비를 축소하지 못하는 것을 알 수 있습니다 .

크기 조정 후 실제로보고있는 것 :

스크롤 바를 사용하여 크기 조정 후 내 현재 페이지

그러나 대신 대신 페이지<div><fieldset> 가 확장됩니다. 한 페이지에 a 와 서로 옆에 있으면 변경 사항을보다 쉽게 ​​테스트 하고 확인할 수 있습니다 . 주변 태그 를 삭제 하면 크기 조정이 작동합니다. 태그는 어떻게 든 수평 크기 조정 휴식 원인이된다.<fieldset><div><fieldset><fieldset>

<fieldset>CSS 규칙이있는 것처럼 행동이다 fieldset { min-width: min-content; }. ( min-content대략 아이가 오버플로하지 않는 가장 작은 너비를 의미합니다.) <fieldset>with를 <div>withmin-width: min-content 로 바꾸면 정확히 동일하게 보입니다. 그러나 min-content내 스타일, 브라우저 기본 스타일 시트 또는 Firebug의 CSS 검사기 에는 규칙이 없습니다 . <fieldset>Firebug의 CSS Inspector 및 Firefox의 기본 스타일 시트 forms.css 에서 볼 수있는 모든 스타일을 재정의하려고 시도했지만 도움이되지 않았습니다. 특히 재정의 min-width하고 width아무것도하지 않았습니다.

암호

필드 셋의 HTML :

<fieldset>
    <div class="wrapper">
        <select id="section" name="section">
            <option value="-1"></option>
            <option value="1501" selected="selected">Sphinx of black quartz, judge my vow. The quick brown fox jumps over the lazy dog.</option>
            <option value="1480">Subcontractor</option>
            <option value="3181">Valley</option>
            <option value="3180">Ventura</option>
            <option value="3220">Very Newest Section</option>
            <option value="1481">Visitor</option>
            <option value="3200">N/A</option>
        </select>
    </div>
</fieldset>

작동하지만 작동하지 않는 CSS :

fieldset {
    /* hide fieldset-specific visual features: */
    margin: 0;
    padding: 0;
    border: none;
}

select {
    max-width: 100%;
}

width속성을 기본값으로 재설정하면 아무것도 수행되지 않습니다.

fieldset {
    width: auto;
    min-width: 0;
    max-width: none;
}

문제를 해결하려고 하는데 실패한 추가 CSS :

/* try lots of things to fix the width, with no success: */
fieldset {
    display: block;
    min-width: 0;
    max-width: 100%;
    width: 100%;
    text-overflow: clip;
}

div.wrapper {
    width: 100%;
}

select {
    overflow: hidden;
}

자세한 내용은

이 문제는 보다 포괄적이고 복잡한 jsFiddle 예제 에서도 발생하며 실제로 수정하려는 웹 페이지와 더 유사합니다. <select>인라인 블록의 div크기를 조정하지 못하는 것도 문제가 아님 을 알 수 있습니다 . 이 예제는 더 복잡하지만 위의 간단한 경우에 대한 수정도이 더 복잡한 경우를 수정한다고 가정합니다.

[편집 : 아래의 브라우저 지원 정보를 참조하십시오.]

이 문제에 대한 한 가지 궁금한 점은 을 설정하면div.wrapper { width: 50%; }<fieldset> 그 시점에서 자체 크기 조정 이 중지되고 전체 크기 <select>가 뷰포트의 가장자리에 도달했을 것입니다. (가) 것처럼 크기 조정이 발생 <select>가지고 width: 100%도 불구하고, <select>그것을 가지고처럼 보인다 width: 50%.

50 % 너비 래퍼 div로 크기 조정 후

당신 이 <select>스스로width: 50% 를 주면 그 행동은 일어나지 않습니다. 너비가 정확하게 설정되었습니다.

50 % 너비로 크기를 조정 한 후 선택

그 차이의 이유를 이해하지 못합니다. 그러나 관련이 없을 수 있습니다.

또한 HTML 필드 셋을 통해 아이들이 무한정 확장 할 수 있는 매우 유사한 질문을 발견했습니다 . asker가 솔루션을 찾지 못해 를 제거하는 것 외에는 솔루션이 없다고 생각 합니다 <fieldset>. 그러나 <fieldset>디스플레이를 제대로 만드는 것이 실제로 불가능하다면 왜 그런지 궁금합니다. 무엇에서 <fieldset>의 사양 또는 기본 CSS ( 이 질문의 등은 )이 문제의 원인은? 이 특수 동작은 여러 브라우저가 이와 같이 작동하기 때문에 어딘가에 문서화되어 있습니다.

배경 목표 및 요구 사항

내가 이것을하려고하는 이유는 큰 형태의 기존 페이지에 모바일 스타일을 작성하는 것의 일부입니다. 양식에는 여러 섹션이 있으며 그 중 일부는에 싸여 <fieldset>있습니다. 스마트 폰 (또는 브라우저 창을 작게 만드는 경우)이있는 페이지 부분은 <fieldset>나머지 양식보다 훨씬 넓습니다. 대부분의 폼은 너비를 제한하지만, 섹션이 <fieldset>그렇지 않으면 사용자가 축소하거나 오른쪽으로 스크롤하여 해당 섹션을 모두 볼 수 있습니다.

<fieldset>큰 앱의 많은 페이지에서 생성되기 때문에 단순히을 제거하는 것이 중요합니다 .CSS 또는 JavaScript의 선택기가 어떤 앱에 의존하는지 확실하지 않습니다.

필요한 경우 JavaScript를 사용할 수 있으며 JavaScript 솔루션은 아무것도 아닌 것보다 낫습니다. 그러나 JavaScript가 이것을 수행하는 유일한 방법이라면 CSS와 HTML만으로는 이것이 불가능한 이유에 대한 설명을 듣고 싶습니다.

편집 : 브라우저 지원

사이트에서 Internet Explorer 8 이상 (IE7 지원 중단), 최신 Firefox 및 최신 Chrome을 지원해야합니다. 이 특정 페이지는 iOS 및 Android 스마트 폰에서도 작동합니다. Internet Explorer 8에서는 약간 저하되었지만 여전히 사용 가능한 동작이 허용됩니다.

다른 브라우저에서 깨진 fieldset예제 를 다시 테스트했습니다 . 실제로 다음 브라우저에서 이미 작동합니다.

  • Internet Explorer 8, 9 및 10
  • 크롬
  • Android 용 Chrome

다음과 같은 브라우저에서 작동합니다.

  • Firefox
  • 안드로이드 용 Firefox
  • 인터넷 익스플로러 7

따라서 현재 코드가 침입하는 것에 관심이있는 유일한 브라우저는 Firefox입니다 (데스크톱 및 모바일 모두). 코드가 수정되어 다른 브라우저에서 코드를 중단하지 않고 Firefox에서 작동하면 문제가 해결됩니다.

이 사이트의 HTML 템플릿은 클래스를 추가하는 인터넷 익스플로러 조건부 주석을 사용 .ie8하고 .oldie받는 <html>요소입니다. IE의 스타일 차이를 해결해야하는 경우 CSS에서 해당 클래스를 사용할 수 있습니다. 추가 된 클래스는 이 이전 버전의 HTML5 Boilerplate 과 동일 합니다.

답변

업데이트 (2017 년 9 월 25 일)

아래 설명 된 Firefox 버그 는 Firefox 53 부터 수정되었으며이 답변에 대한 링크는 마침내 Bootstrap의 문서에서 제거 되었습니다 .

또한 -moz-document이 답변으로 인해 부분적으로 지원 제거를 차단 해야하는 Mozilla 기고자에게 진심으로 사과드립니다 .

수정

WebKit 및 Firefox 53 이상에서는 필드 세트 min-width: 0;에서 기본값 인 min-content.¹ 를 무시하도록 설정했습니다.

그럼에도 불구하고 파이어 폭스는 약간 … 필드 셋에 있어서는 이상하다. 이전 버전에서이 작업을 수행하려면 필드 세트의 display특성을 다음 값 중 하나로 변경해야 합니다.

  • table-cell (권장)
  • table-column
  • table-column-group
  • table-footer-group
  • table-header-group
  • table-row
  • table-row-group

이 중 권장table-cell 합니다. 모두 table-row와 table-row-group너비를 변경하지 못하도록 반면, table-column그리고 table-column-group당신은 높이를 변경하는 것을 방지 할 수 있습니다.

이것은 IE의 렌더링을 (합리적으로) 깨뜨릴 것입니다. 단지 게코이 필요하기 때문에, 당신은 정당 사용할 수 @-moz-document의 – 온실를 모질라의 독자적인 CSS 확장 다른 브라우저에서 숨길 -to :

@-moz-document url-prefix() {
    fieldset {
        display: table-cell;
    }
}

(여기 jsFiddle 데모가 있습니다.)

그것은 문제를 해결하지만, 당신이 나와 같은 것이면 당신의 반응은 …

뭐.

이 인 이유가 있지만, 꽤 아니다.

fieldset 요소의 기본 표현은 터무니없고 CSS에서 본질적으로 지정할 수 없습니다. 필드 세트의 경계는 범례 요소와 겹치면 사라지지만 배경은 계속 표시됩니다! 다른 요소 조합으로이를 재현 할 방법이 없습니다.

또한 구현은 레거시 동작에 대한 양보로 가득합니다. 하나는 필드 세트의 최소 너비가 내용의 고유 너비보다 작지 않다는 것입니다. WebKit은 기본 스타일 시트에서이 동작을 지정하여이를 무시하는 방법을 제공하지만 Gecko²는 한 단계 더 나아가 렌더링 엔진에 적용합니다 .

그러나 Gecko 에서는 내부 테이블 요소가 특수한 프레임 유형 을 구성합니다 . 이러한 display값이 설정된 요소의 치수 구속 조건 은 별도의 코드 경로 에서 계산되어 필드 세트에 부과 된 최소 폭을 완전히 회피합니다.

다시 말하지만이 버그 는 Firefox 53부터 수정되었으므로 최신 버전 만 대상으로하는 경우에는이 핵이 필요하지 않습니다.

사용 @-moz-document안전을?

이 문제에 대해서는 그렇습니다. @-moz-document이 버그가 수정 된 53까지 모든 Firefox 버전에서 의도 한대로 작동합니다.

이것은 우연이 아닙니다. 이 답변의 일부로, 사용자 / UA 스타일 시트 로 제한 @-moz-document하는 버그는 먼저 수정 된 기본 필드 세트 버그에 따라 결정되었습니다.

이 외에도 CSS 및 기타 리소스에도 불구하고 Firefox를 대상으로 하지 마십시오@-moz-document .³

¹ 값 앞에 접두사가 붙을 수 있습니다. 한 독자에 따르면, 이것은 Android 4.1.2 Stock Browser 및 다른 이전 버전에서는 영향을 미치지 않습니다. 이것을 확인할 시간이 없었습니다.

²이 답변의 Gecko 소스에 대한 모든 링크는 2013 년 7 월 29 일에 완결 된 5065fdc12408 변경 세트를 참조합니다 . Mozilla Central의 최신 개정판 과 메모를 비교할 수 있습니다 .

³ 예를 들어 SO # 953491 : CSS 및 CSS 트릭을 사용 하여 Firefox 만 대상 지정 : 유명 사이트에서 널리 참조되는 기사를 위해 Firefox 를 대상으로하는 CSS 핵 .

답변

답변이 선택된 iOS의 Safari 문제

Jordan Gray의 답변이 특히 도움이된다는 것을 알았습니다. 그러나 Safari iOS 에서이 문제를 해결하지 못하는 것 같습니다.

내 문제는 단순히 요소의 최대 너비가 % 너비 인 경우 필드 세트에 자동 너비를 가질 수 없다는 것입니다.

문제 해결

컨테이너의 너비가 100 %가되도록 필드 세트를 설정하면이 문제를 해결할 수 있습니다.

예

fieldset {
    min-width: 0;
    width: 100%;
}

작업 예는 아래를 참조하십시오. fieldset에서 % 너비를 제거하거나 auto로 교체하면 계속 작동하지 않습니다.

JSFiddle | 코드 펜

답변

나는 이것으로 여러 시간 동안 어려움을 겪었으며 기본적으로 브라우저는 CSS에서 재정의 해야하는 계산 된 스타일을 적용하고 있습니다. fieldset요소 대 divs (아마도 min-width?) 에 설정된 정확한 속성을 잊어 버렸습니다 .

가장 좋은 조언은 요소를로 변경 div하고 관리자에서 계산 된 스타일을 복사 한 다음 요소를 다시 변경 fieldset하고 계산 된 스타일을 비교하여 범인을 찾는 것입니다.

희망이 도움이됩니다.

업데이트 :display: table-cell Chrome 이외의 브라우저에서 도움말 추가

답변

.fake-select { white-space:nowrap; }필드 세트가 .fake-select요소를 강제 너비가 아닌 원래 너비 로 해석 하도록합니다 (오버플로가 숨겨져 있어도).

그 규칙을 제거하고 .fake-select의 max-width:100%를 정당한 것으로 바꾸고 width:100%모든 것이 적합합니다. 주의 할 점은 위조 선택의 모든 내용을 볼 수 있지만 이것이 전부라고 생각하지는 않으며 현재 수평에 적합하다는 것입니다.

업데이트 : 다음 바이올린 (현재 선택 항목 만 포함)의 현재 규칙을 사용하면 필드 세트의 자식이 올바른 너비로 제한됩니다. .fake-select의견에 대한 규칙을 제거 하고 의견을 수정 하는 것 외에도 (에서 // comment~까지 /* comment */) 바이올린의 CSS에서 변경 사항을 언급했습니다.

귀하의 문제를 더 잘 이해하고 있으며, 바이올린에는 진행 상황이 반영되어 있습니다. 모든 기본 규칙을 설정 <select>하고 .xxlarge480px보다 넓은 규칙을 예약 하십시오 (너비 를 알고 있기 때문에 작동 #viewport하며 너무 넓은 클래스를 수동으로 추가 할 수 있습니다. 약간의 테스트 만하면됩니다) )

증명

답변