문제
나는 있습니다<select>그 중 하나가 있는 곳에<option>의 텍스트 값이 매우 깁니다.나는 그것을 원합니다.<select>표시된 텍스트를 잘라내야 하는 경우에도 부모보다 너비가 넓지 않도록 크기를 조정합니다.max-width: 100%그래야 합니다.
크기 조정 전:
크기 조정 후 원하는 항목:
그러나 이 jsFiddle 예제를 로드하고 결과 패널의 너비를 크기 조정하는 경우<select>당신은 내부의 선택을 볼 수 있습니다.<fieldset>너비를 축소하지 못했습니다.
크기 조정 후 실제로 표시되는 내용:
그러나 가 아닌 가 있는 동등한 페이지의 크기는 적절하게 조정됩니다.한 페이지에 와 가 나란히 있으면 이를 확인하고 변경 내용을 보다 쉽게 테스트할 수 있습니다.그리고 주변 태그를 삭제하면 크기가 조정됩니다.<fieldset>태그로 인해 수평 크기 조정이 중단되었습니다.
그<fieldset>는 마치 규칙 CSS 규는것행동다합니가 있는 것과 .fieldset { min-width: min-content; }(min-content대략 어린이가 넘치지 않는 가장 작은 너비를 의미합니다.)만약 내가 그것을 교체한다면,<fieldset>와 함께, 그것은 정확히 똑같이 보입니다.하지만 규칙은 없습니다.min-content내 스타일, 브라우저 기본 스타일시트 또는 Firebug의 CSS Inspector에 표시됩니다.저는 위에 보이는 모든 스타일을 오버라이드하려고 했습니다.<fieldset>Firebug의 CSS Inspector와 Firefox의 기본 스타일시트 form.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크기 조정에도 실패합니다.이 예는 더 복잡하지만, 위의 간단한 사례에 대한 수정도 이 더 복잡한 사례를 수정할 것이라고 생각합니다.
[편집: 아래 브라우저 지원 세부 정보 참조]
이 문제에 대해 한 가지 궁금한 점은 만약 당신이 설정한다면,<fieldset>점에서 자체 크기 조정을 중지한 다음 전체 크기<select>뷰포트 가장자리에 부딪혔을 겁니다크기 조정은 다음과 같이 발생합니다.<select>가지다width: 100% 록비록▁the▁though<select>가 있는 것처럼 보입니다.width: 50%.
자체를 지정하면 해당 동작이 발생하지 않습니다. 너비는 올바르게 설정됩니다.
저는 그 차이의 이유를 이해할 수 없습니다.하지만 관련이 없을 수도 있습니다.
저는 또한 매우 유사한 질문 HTML 필드 집합이 아이들이 무한히 확장할 수 있게 한다는 것을 발견했습니다.질문자는 해결책을 찾을 수 없었고, 해결책을 제거하는 것 외에 다른 해결책이 없다고 추측합니다.<fieldset>하지만 저는 궁금해요, 정말로 그것을 만드는 것이 불가능한지.<fieldset>디스플레이 오른쪽, 왜 그럴까요?무슨 일입니까?<fieldset>의 사양 또는 기본 CSS(이 질문을 기준으로 함)가 이 동작을 유발합니까?여러 브라우저가 이렇게 작동하기 때문에 이 특수 동작은 어딘가에서 문서화되어 있을 수 있습니다.
배경 목표 및 요구사항
제가 이렇게 하려고 하는 이유는 큰 양식을 가진 기존 페이지의 모바일 스타일을 작성하기 위한 것입니다.양식에는 여러 개의 섹션이 있으며, 양식의 한 부분은 다음과 같습니다.<fieldset>스마트폰에서(또는 브라우저 창을 작게 만드는 경우) 페이지의 부분에<fieldset>다른 양식보다 훨씬 넓습니다.의 형태는 하지만, ▁▁the▁section▁most가 있는 부분은<fieldset>사용자가 해당 섹션을 모두 보려면 축소하거나 오른쪽으로 스크롤해야 합니다.
저는 단순히 그것을 제거하는 것을 경계합니다.<fieldset>큰 앱의 많은 페이지에서 생성되기 때문에 CSS나 자바스크립트의 선택기가 그것에 의존할 수 있는지 잘 모르겠습니다.
필요하다면 자바스크립트를 사용할 수 있고 자바스크립트 솔루션이 없는 것보다 낫습니다.하지만 자바스크립트가 이것을 할 수 있는 유일한 방법이라면, 왜 이것이 CSS와 HTML만을 사용하여 가능하지 않은지에 대한 설명을 듣고 싶습니다.
편집: 브라우저 지원
사이트에서 Internet Explorer 8 이상(IE7 지원 중단), 최신 Firefox 및 최신 Chrome을 지원해야 합니다.이 페이지는 iOS 및 Android 스마트폰에서도 작동합니다.Internet Explorer 8에서는 약간 저하되었지만 여전히 사용 가능한 동작을 사용할 수 있습니다.
다른 브라우저에서 고장난 예제를 다시 테스트했습니다.실제로 다음 브라우저에서 이미 작동합니다.
- Internet Explorer 8, 9 및 10
- 크롬
- 안드로이드용 크롬
다음 브라우저에서 중단됩니다.
- 파이어폭스
- 안드로이드용 파이어폭스
- 인터넷 익스플로러 7
따라서 현재 코드가 침입하는 브라우저는 데스크톱과 모바일 모두에서 Firefox뿐입니다.만약 코드가 다른 브라우저에서 깨지지 않고 파이어폭스에서 작동하도록 수정되었다면, 그것은 제 문제를 해결할 수 있을 것입니다.
Explorer 하여 "HTML"과 같은 합니다..ie8그리고..oldie에▁<html>원소의IE에서 스타일 차이를 해결해야 할 경우 CSS에서 해당 클래스를 사용할 수 있습니다.추가된 클래스는 이 이전 버전의 HTML5 보일러 플레이트와 동일합니다.
업데이트(2017년 9월 25일)
아래 설명된 Firefox 버그는 Firefox 53에서 수정되었으며 이 답변에 대한 링크가 마침내 Bootstrap의 문서에서 제거되었습니다.
, 지제에 대한 지원 제거를 차단해야 했던 기여자들에게 진심으로 사과드립니다.-moz-document부분적으로는 이 대답 때문에.
픽스
WebKit 및 Firefox 53+에서 다음을 설정합니다.min-width: 0;인 " 의본을재설필드서에된정록"를 min-content
그래도 파이어폭스는 필드셋에 관해서는 좀 이상합니다.이전 버전에서 이 작업을 수행하려면 다음을 변경해야 합니다.display필드의 속성을 다음 값 중 하나로 설정합니다.
table-cell(권장)table-columntable-column-grouptable-footer-grouptable-header-grouptable-rowtable-row-group
이 중에서 추천합니다. 둘 다.table-row그리고.table-row-group 너비변방는지동안하을경,▁prevent동안table-column그리고.table-column-group키 변경을 방지합니다.
이것은 IE에서 렌더링을 중단시킬 것입니다(어느 정도 합리적입니다).오직 Gecko만이 이것을 필요로 하기 때문에, 당신은 Mozilla의 독점적인 CSS 확장 중 하나인 이것을 다른 브라우저로부터 숨기기 위해 정당하게 사용할 수 있습니다.
@-moz-document url-prefix() {
fieldset {
display: table-cell;
}
}
(jsFiddle 데모입니다.)
그건 해결책이지만, 만약 당신이 나와 같다면, 당신의 반응은...
뭐라고요?
이유는 있지만, 예쁘지 않습니다.
필드 집합 요소의 기본 프레젠테이션은 터무니없고 CSS에서 지정하는 것이 본질적으로 불가능합니다.생각해 보세요: 필드 집합의 테두리는 범례 요소에 의해 겹쳐지는 곳에서 사라지지만 배경은 계속 표시됩니다!이것을 다른 요소들의 조합으로 재현할 수 있는 방법은 없습니다.
무엇보다도, 구현은 레거시 동작에 대한 양보로 가득 차 있습니다.하나는 필드 집합의 최소 너비가 내용의 고유 너비보다 결코 작지 않다는 것입니다.WebKit는 기본 스타일시트에 이 동작을 지정하여 재정의하는 방법을 제공하지만 Gecko²는 한 단계 더 나아가 렌더링 엔진에서 이 동작을 적용합니다.
그러나 내부 테이블 요소는 Gecko에서 특수 프레임 유형을 구성합니다.이것들을 포함하는 요소들의 치수 구속조건display설정된 값은 별도의 코드 경로에서 계산되어 필드 집합에 적용되는 최소 너비를 완전히 우회합니다.
다시 말하지만, 이 버그는 Firefox 53부터 수정되었으므로 최신 버전만 대상으로 하는 경우에는 이 해킹이 필요하지 않습니다.
사중을 사용하고 .@-moz-document안전합니까?
이 한 가지 문제에 대해서는, 네. @-moz-document이 버그가 수정된 53까지 모든 버전의 Firefox에서 의도한 대로 작동합니다.
이건 우연이 아닙니다.부분적으로 이 답변 때문에 사용자/UA 스타일시트로 제한하는 버그는 먼저 수정되는 기본 필드셋 버그에 따라 달라집니다.
그 외에는 다른 리소스에도 불구하고 CSS에서 파이어폭스를 대상으로 사용하지 마십시오.
◦ 값은 접두사로 사용할 수 있습니다.한 독자에 따르면, 이것은 Android 4.1.2 Stock Browser와 다른 이전 버전에서는 효과가 없습니다. 저는 이것을 확인할 시간이 없었습니다.
² 이 답변에서 Gecko 소스에 대한 모든 링크는 2013년 7월 29일에 커밋된 5065fdc12408 변경 세트를 참조합니다. 참고 사항을 Mozilla Central의 최신 버전과 비교할 수 있습니다.
◦ 예: SO #953491: CSS와 CSS 트릭으로 파이어폭스만을 대상으로 함: 유명 사이트에서 널리 참조되는 기사에 대해 파이어폭스를 대상으로 하는 CSS 해킹.
iOS에서 Safari 문제(선택한 답변 포함)
저는 조던 그레이의 답변이 특히 도움이 된다는 것을 알게 되었습니다.하지만 Safari iOS에서는 이 문제가 해결되지 않은 것 같습니다.
내 문제는 내 요소의 최대 너비가 % 너비인 경우 필드 집합이 자동 너비를 가질 수 없다는 것입니다.
문제 수정
필드 세트의 컨테이너 너비를 100%로 설정하는 것만으로도 이 문제를 해결할 수 있습니다.
예
fieldset {
min-width: 0;
width: 100%;
}
아래의 작업 예를 참조하십시오. 필드 세트에서 % 너비를 제거하거나 자동으로 교체하면 계속 작동하지 않습니다.
저는 이것으로 많은 시간을 고생했고, 기본적으로 브라우저는 CSS에서 재정의해야 하는 계산된 스타일을 적용하고 있습니다.는 설된정속잊어다니립버성을정확에 설정되어 .fieldset 대 소대 요div)min-width?).
나의 가장 좋은 조언은 당신의 요소를 a로 바꾸는 것입니다.div스타일을 한 후 검자로부터계스복을일사로 합니다.fieldset그리고 범인을 찾기 위해 계산된 스타일을 비교합니다.
도움이 되길 바랍니다.
업데이트: 추가display: table-cell비 Chrome 브라우저에서 도움이 됩니다.
.fake-select { white-space:nowrap; }이 필드세해만습들니다었록도석하가트▁theset다를 하도록 했습니다..fake-select강제 너비가 아닌 원래 너비로 요소를 지정합니다(오버플로가 숨겨져 있는 경우에도).
규칙을 하고 "" " " " " " 을 변경합니다..fake-select의max-width:100%width:100%모든 것이 들어맞습니다.주의할 점은 가짜 선택의 내용이 다 보이는데 이게 다 그렇게 나쁘다고 생각하지 않고 지금은 가로로 들어맞습니다.
업데이트: 다음 중간에 있는 현재 규칙(실제 선택 항목만 포함)을 사용하면 필드 집합의 자식이 올바른 너비로 제한됩니다.다음에 대한 규칙 제거 이외의 작업.fake-select 댓글(및수정에코트멘서(에정()트코))// comment/* comment */저는 피들의 CSS의 변화를 주목했습니다.
저는 이제 당신의 문제를 더 잘 이해했고, 바이올린은 약간의 진전을 반영합니다.모두에 대한 기본 규칙을 설정합니다.<select>및 적립금, 예군비..xxlarge당신이 아는 사람들은 480도보다 더 넓을 것입니다. (그리고 이것은 당신이 너비를 알기 때문에 가능합니다.)#viewport너무 넓은 클래스에 수동으로 클래스를 추가할 수 있습니다.약간의 테스트만 필요)
언급URL : https://stackoverflow.com/questions/17408815/fieldset-resizes-wrong-appears-to-have-unremovable-min-width-min-content
'programing' 카테고리의 다른 글
| Python panda: Excel 파일을 읽을 때 데이터 유형을 지정하는 방법은 무엇입니까? (0) | 2023.09.02 |
|---|---|
| DIV가 전체 테이블 셀을 채우도록 합니다. (0) | 2023.09.02 |
| Android 에뮬레이터-5554 오프라인 (0) | 2023.09.02 |
| C/C++는 최소 실행 시간에 대한 보장을 제공합니까? (0) | 2023.08.13 |
| 여러 테이블의 MYSQL 왼쪽 조인 카운트 (0) | 2023.08.13 |