브라우저 및 장치
각각에 대해 알려진 단점과 버그를 포함하여 Bootstrap에서 지원하는 최신 브라우저에서 오래된 브라우저에 이르기까지 브라우저와 장치에 대해 알아보세요.
부트스트랩은 모든 주요 브라우저 및 플랫폼의 안정적인 최신 릴리스 를 지원합니다. Windows에서는 Internet Explorer 10-11/Microsoft Edge를 지원합니다 .
직접 또는 플랫폼의 웹 보기 API를 통해 최신 버전의 WebKit, Blink 또는 Gecko를 사용하는 대체 브라우저는 명시적으로 지원되지 않습니다. 그러나 부트스트랩은 (대부분의 경우) 이러한 브라우저에서도 올바르게 표시되고 작동해야 합니다. 보다 구체적인 지원 정보는 아래에 나와 있습니다.
일반적으로 Bootstrap은 각 주요 플랫폼의 기본 브라우저의 최신 버전을 지원합니다. 프록시 브라우저(예: Opera Mini, Opera Mobile의 터보 모드, UC Browser Mini, Amazon Silk)는 지원되지 않습니다.
| 크롬 | 파이어폭스 | 원정 여행 | 안드로이드 브라우저 및 WebView | 마이크로소프트 엣지 | |
|---|---|---|---|---|---|
| 기계적 인조 인간 | 지원 | 지원 | 해당 없음 | Android v5.0 이상 지원 | 지원 |
| iOS | 지원 | 지원 | 지원 | 해당 없음 | 지원 |
| 윈도우 10 모바일 | 해당 없음 | 해당 없음 | 해당 없음 | 해당 없음 | 지원 |
마찬가지로 대부분의 데스크톱 브라우저의 최신 버전이 지원됩니다.
| 크롬 | 파이어폭스 | 인터넷 익스플로러 | 마이크로소프트 엣지 | 오페라 | 원정 여행 | |
|---|---|---|---|---|---|---|
| 맥 | 지원 | 지원 | 해당 없음 | 해당 없음 | 지원 | 지원 |
| 창 | 지원 | 지원 | 지원됨, IE10+ | 지원 | 지원 | 지원되지 않음 |
Firefox의 경우 최신 일반 안정 릴리스 외에 최신 ESR(Extended Support Release) 버전의 Firefox도 지원합니다.
비공식적으로 부트스트랩은 공식적으로 지원되지는 않지만 Linux용 Chromium 및 Chrome, Linux용 Firefox 및 Internet Explorer 9에서 충분히 잘 보이고 작동해야 합니다.
부트스트랩이 해결해야 하는 일부 브라우저 버그 목록은 브라우저 버그의 벽을 참조하세요 .
Internet Explorer 10 이상이 지원됩니다. IE9 이하는 안됩니다. 일부 CSS3 속성 및 HTML5 요소는 IE10에서 완전히 지원되지 않거나 전체 기능을 위해 접두사 속성이 필요합니다. CSS3 및 HTML5 기능의 브라우저 지원에 대한 자세한 내용은 Can I use… 를 방문하십시오 .
IE8-9 지원이 필요한 경우 부트스트랩 3을 사용하십시오. 부트스트랩 3 은 우리 코드의 가장 안정적인 버전이며 중요한 버그 수정 및 문서 변경 사항에 대해 여전히 우리 팀에서 지원합니다. 그러나 새로운 기능은 추가되지 않습니다.
overflow: hidden;요소 에 대한 지원 <body>은 iOS 및 Android에서 상당히 제한적입니다. 이를 위해 해당 장치의 브라우저 중 하나에서 모달의 상단 또는 하단을 지나 스크롤하면 <body>콘텐츠가 스크롤되기 시작합니다. Chrome 버그 #175502 (Chrome v40에서 수정됨) 및 WebKit 버그 #153852 를 참조 하세요 .
<input>iOS 9.2부터 모달이 열려 있는 동안 스크롤 제스처의 초기 터치가 텍스트 또는 a 의 경계 내에 있으면 모달 자체 대신 모달 아래의 콘텐츠가 스크롤됩니다 <textarea>. WebKit 버그 #153856<body> 을 참조하십시오 .
.dropdown-backdrop요소는 z-인덱싱의 복잡성 때문에 탐색에서 iOS에서 사용되지 않습니다 . 따라서 탐색 모음에서 드롭다운을 닫으려면 드롭다운 요소(또는 iOS에서 클릭 이벤트를 발생시키는 다른 요소)를 직접 클릭해야 합니다 .
페이지 확대/축소는 부트스트랩과 웹의 나머지 부분 모두에서 일부 구성 요소에서 필연적으로 렌더링 아티팩트를 나타냅니다. 문제에 따라 문제를 해결할 수 있습니다(먼저 검색한 다음 필요한 경우 문제 열기). 그러나 해킹된 해결 방법 외에는 직접적인 해결책이 없는 경우가 많기 때문에 이를 무시하는 경향이 있습니다.
대부분 :hover의 터치 장치에서는 불가능하지만 iOS는 이 동작을 에뮬레이트하여 한 요소를 탭한 후에도 지속되는 "고정" 호버 스타일을 만듭니다. 이러한 호버 스타일은 사용자가 다른 요소를 탭할 때만 제거됩니다. 이 동작은 대체로 바람직하지 않은 것으로 간주되며 Android 또는 Windows 장치에서는 문제가 되지 않는 것으로 보입니다.
v4 알파 및 베타 릴리스 전반에 걸쳐 우리는 호버링을 에뮬레이트하는 터치 장치 브라우저에서 호버 스타일을 비활성화하는 미디어 쿼리 심을 선택하기 위한 불완전하고 주석 처리된 코드를 포함했습니다. 이 작업은 완전히 완료되거나 활성화된 적이 없지만 완전한 손상을 피하기 위해 이 shim 을 더 이상 사용하지 않고 믹스인을 의사 클래스의 지름길로 유지하기로 결정했습니다.
일부 최신 브라우저에서도 인쇄가 이상할 수 있습니다.
Safari v8.0부터 고정 너비 .container클래스를 사용하면 Safari에서 인쇄할 때 비정상적으로 작은 글꼴 크기를 사용할 수 있습니다. 자세한 내용은 문제 #14868 및 WebKit 버그 #138192 를 참조하세요. 한 가지 잠재적인 해결 방법은 다음 CSS입니다.
@media print {
.container {
width: auto;
}
}기본적으로 Android 4.1(및 일부 최신 릴리스)은 기본 웹 브라우저(Chrome과 반대)로 브라우저 앱과 함께 제공됩니다. 불행히도 브라우저 앱에는 일반적으로 CSS와 관련하여 많은 버그와 불일치가 있습니다.
요소 에서 <select>Android 스톡 브라우저는 사이드 컨트롤이 있는 경우 border-radius및/또는 border적용된 경우 사이드 컨트롤을 표시하지 않습니다. (자세한 내용은 이 StackOverflow 질문 을 참조하세요.) 아래 코드 스니펫을 사용하여 문제가 되는 CSS를 제거하고 <select>Android 기본 브라우저에서 스타일이 지정되지 않은 요소로 렌더링합니다. 사용자 에이전트 스니핑은 Chrome, Safari 및 Mozilla 브라우저와의 간섭을 방지합니다.
<script>
$(function () {
var nua = navigator.userAgent
var isAndroid = (nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 && nua.indexOf('AppleWebKit') > -1 && nua.indexOf('Chrome') === -1)
if (isAndroid) {
$('select.form-control').removeClass('form-control').css('width', '100%')
}
})
</script>예시를 보시겠습니까? 이 JS Bin 데모를 확인하십시오.
오래되고 버그가 있는 브라우저에 최상의 경험을 제공하기 위해 Bootstrap은 브라우저 자체의 버그를 해결하기 위해 여러 위치에서 CSS 브라우저 해킹 을 사용하여 특정 브라우저 버전에 특수 CSS를 대상으로 지정합니다. 이러한 해킹으로 인해 CSS 유효성 검사기가 유효하지 않다고 불평하는 것은 당연합니다. 몇 곳에서는 아직 완전히 표준화되지 않은 최첨단 CSS 기능을 사용하지만 순전히 점진적 향상을 위해 사용됩니다.
이러한 유효성 검사 경고는 실제로 중요하지 않습니다. 왜냐하면 CSS의 해킹되지 않은 부분이 완전히 검증되고 해킹된 부분이 해킹되지 않은 부분의 적절한 기능을 방해하지 않기 때문입니다. 따라서 이러한 특정 경고를 의도적으로 무시하는 이유입니다.
특정 Firefox 버그 에 대한 해결 방법이 포함되어 있기 때문에 HTML 문서에도 사소하고 중요하지 않은 HTML 유효성 검사 경고가 있습니다.