IE10에서 스크롤 바 오버레이 콘텐츠를 방지하려면 어떻게 해야 합니까?
IE10에서 스크롤 바가 항상 있는 것은 아닙니다.그리고 그것이 오버레이로 보일 때...멋진 기능이지만 전체 화면 애플리케이션이고 그 뒤에 제 로고와 메뉴가 없어지기 때문에 특정 웹사이트에 대해서는 전원을 끄고 싶습니다.
IE10:
크롬:
IE10에서 스크롤 바를 항상 위치에 고정하는 방법을 아는 사람?
overflow-y: scroll가 작동하지 않는 것 같습니다! 그냥 내 웹사이트에 영구적으로 올려놓습니다.
문제를 일으키는 부트스트랩일 수도 있지만 어떤 부분인지 전혀 모르겠습니다! 여기 예를 참조하십시오. http://twitter.github.io/bootstrap/
xec가 그의 답변에서 언급했듯이, 이 동작은 @-ms-viewport 설정으로 인해 발생합니다.
좋은 소식은 스크롤 바를 되돌리기 위해 이 설정을 제거할 필요가 없다는 것입니다(이 경우 응답형 웹 설계를 위해 @-ms-viewport 설정을 사용합니다).
이 문서에서 언급한 대로 -ms-overflow-style을 사용하여 오버플로 동작을 정의할 수 있습니다.
http://msdn.microsoft.com/en-us/library/ie/hh771902(v=vs.85).aspx
스크롤 막대를 되돌리려면 스크롤 막대로 스타일을 설정합니다.
body {
-ms-overflow-style: scrollbar;
}
스크롤 바
내용이 오버플로될 때 요소가 고전적인 스크롤바 유형 컨트롤을 표시함을 나타냅니다.-ms-autohidding-scrollbar와 달리 스크롤바로 설정된 -ms-overflow-style 속성을 가진 요소의 스크롤바는 항상 화면에 나타나고 요소가 비활성 상태일 때 흐려지지 않습니다.스크롤 막대는 내용을 중첩하지 않으므로 내용이 나타나는 요소의 가장자리를 따라 추가 레이아웃 공간을 차지합니다.
구글을 조금 검색한 후 우연히 "Blue Ink"가 남긴 댓글에서 다음과 같은 내용이 언급된 토론을 발견했습니다.
페이지를 검사하면서 다음과 같은 방법으로 복제할 수 있었습니다.
@-ms-viewport { width: 디바이스-width; }
스크롤 막대가 투명해집니다.이제 콘텐츠가 화면 전체를 차지하기 때문에 말이 됩니다.
이 시나리오에서는 다음을 추가합니다.
overflow-y: auto;
스크롤 막대를 자동으로 숨깁니다.
그리고 bootstrap response-utilities.less file, line 21에서 다음과 같은 CSS 코드를 찾을 수 있습니다.
// IE10 in Windows (Phone) 8
//
// Support for responsive views via media queries is kind of borked in IE10, for
// Surface/desktop in split view and for Windows Phone 8. This particular fix
// must be accompanied by a snippet of JavaScript to sniff the user agent and
// apply some conditional CSS to *only* the Surface/desktop Windows 8. Look at
// our Getting Started page for more information on this bug.
//
// For more information, see the following:
//
// Issue: https://github.com/twbs/bootstrap/issues/10497
// Docs: http://getbootstrap.com/getting-started/#support-ie10-width
// Source: http://timkadlec.com/2013/01/windows-phone-8-and-device-width/
// Source: http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/
@-ms-viewport {
width: device-width;
}
이 토막글이 행동의 원인입니다.위 댓글 코드에 나열된 링크를 읽어보시기를 권합니다. (이 답변을 처음 올린 후 추가되었습니다.)
해결책: IE10의 경우 탐지한 다음 CSS를 사용하는 두 단계입니다.
이 작업을 수행합니다.
if (/msie\s10\.0/gi.test(navigator.appVersion)) {
$('body').addClass('IE10');
} else if (/rv:11.0/gi.test(navigator.appVersion)) {
$('body').addClass('IE11');
}
// --OR--
$('body').addClass(
/msie\s10\.0/gi.test(navigator.appVersion) ? 'IE10' :
/rv:11.0/gi.test(navigator.appVersion) ? 'IE11' :
'' // Neither
);
// --OR (vanilla JS [best])--
document.body.className +=
/msie\s10\.0/gi.test(navigator.appVersion) ? ' IE10' :
/rv:11.0/gi.test(navigator.appVersion) ? ' IE11' :
''; // Neither
다음 CSS 추가:
body.IE10, body.IE11 {
overflow-y: scroll;
-ms-overflow-style: scrollbar;
}
작동하는 이유:
-
overflow-y:scroll영구적으로 켜짐<body>태그 세로 스크롤 막대 -
-ms-overflow-style:scrollbar자동 hiding 동작을 해제하여 콘텐츠를 밀어내고 모두에게 익숙한 스크롤 바 레이아웃 동작을 제공합니다.
IE11에 대해 문의하는 사용자를 위해 업데이트됨 - 참조 https://learn.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/compatibility/ms537503(v=vs.85)
이거 먹어봐요.
body{-ms-overflow-style: scrollbar !important;}
부트스트랩 4의 데이터 테이블에서도 이 문제가 발생하고 있습니다.Mi 솔루션은 다음과 같습니다.
- ie 브라우저가 열리고 있는지 확인했습니다.
- 테이블 응답 클래스를 테이블 응답 클래스로 대체했습니다.
CSS:
.table-responsive-ie {
display: block;
width: 100%;
overflow-x: auto;}
JS:
var ua = window.navigator.userAgent;
var msie = ua.indexOf("MSIE ");
if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) //If IE
{
$('#tableResponsibleID').removeClass('table-responsive');
$('#tableResponsibleID').addClass('table-responsive-ie');
}
@-ms-viewport 와 다른 제안들을 시도해 보았지만 윈도우 7의 IE11에서는 아무 것도 작동하지 않았습니다.나는 스크롤 바가 없었고 여기 있는 다른 게시물들은 콘텐츠가 많음에도 불구하고 어디에도 스크롤하지 않는 스크롤 바를 기껏해야 주었을 것입니다.. .로 축소된 이 기사 http://www.rlmseo.com/blog/overflow-auto-problem-bug-in-ie/ 를 찾았습니다.
body { overflow-x: visible; }
. 그리고 나를 위해 속임수를 썼습니다.
언급URL : https://stackoverflow.com/questions/17045132/how-can-i-prevent-the-scrollbar-overlaying-content-in-ie10
'programing' 카테고리의 다른 글
| 특정 속성을 가진 모든 요소를 선택하는 방법?TinyXPath로 (0) | 2023.10.28 |
|---|---|
| OpenSSL API를 사용하여 인증서 체인을 프로그래밍 방식으로 확인 (0) | 2023.10.28 |
| 동일한 이름의 형상화된 뷰 및 테이블 (0) | 2023.10.28 |
| jquery 요소를 html 요소로 변환 (0) | 2023.10.23 |
| 엔티티 프레임워크에서 원시 오라클 SQL 쿼리 매개 변수화 (0) | 2023.10.23 |