IE10의 Flexbox가 예측할 수 없는 너비로 렌더링되는 이유는 무엇입니까?

IE10 Flexbox 수수께끼: 브라우저 간 수수께끼

IE10의 Flexbox의 불가사의한 동작에 좌절하셨나요? 당신뿐만이 아닙니다. 최신 브라우저에서 널리 채택되고 있음에도 불구하고 IE10의 Flexbox 지원은 아쉬운 점이 많습니다.

전형적인 사례는 양식 레이아웃 문제입니다.

`

.flexbox form { </p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">display: flex;
flex-direction: row;

로그인 후 복사

}

.flexbox 양식 입력[type=submit] {

width: 31px;

}

.flexbox 양식 입력[type=text] {

width: auto;
flex: auto 1;

}`

In 이론상 이 레이아웃은 입력 유형="제출"을 31px의 고정 너비로 ​​렌더링해야 하며 입력 유형="텍스트"는 원활하게 채워져야 합니다. 남은 공간. 그러나 IE10에서는 입력 type="text"의 기본 너비가 263px로 고정되어 있습니다.

문제의 핵심은 IE10의 Flexbox 사양 부분 구현에 있습니다. 특정 기능이 부족한 중간 버전의 사양을 지원합니다. 안타깝게도 이러한 누락된 기능으로 인해 레이아웃이 예상대로 작동하지 않습니다.

이 문제를 해결하려면 다음 접근 방식을 고려하세요.

• CSS 접두사 사용: IE10이 응답합니다. -ms-flex와 같은 특정 CSS 접두사에.
• 사용 CSS 폴리필: Flexboxie와 같은 폴리필은 IE에서 Flexbox 기능을 에뮬레이트할 수 있습니다.
• 이전 레이아웃 방법으로 대체: IE10에 대해 기존 레이아웃 방법(예: 부동 소수점 또는 테이블) 채택을 고려하세요. 호환성.

다음 버전의 브라우저 업데이트를 계속 지켜봐 주시기 바랍니다. IE는 보다 강력한 Flexbox 지원을 도입할 수 있습니다. 그때까지 이러한 전술은 IE10의 Flexbox라는 브라우저 간 수수께끼를 탐색하는 데 도움이 될 수 있습니다.

위 내용은 IE10의 Flexbox가 예측할 수 없는 너비로 렌더링되는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!