IE에서는 iframe 가로 스크롤 막대를 제거할 수 없나요?
-
09-06-2019 - |
문제
iframe이 있습니다.콘텐츠가 내가 설정한 너비보다 넓어서 iframe에 가로 스크롤 막대가 표시됩니다.iframe의 너비를 늘릴 수 없어서 스크롤 막대만 제거하고 싶습니다.스크롤 속성을 "no"로 설정하려고 시도했지만 두 스크롤 막대가 모두 사라지고 세로 막대가 필요합니다.Overflow-x를 "hidden"으로 설정하려고 시도했는데 ff에서는 가로 스크롤 막대가 사라졌지만 IE에서는 그렇지 않았습니다.나로서는 슬프다.
해결책
scrolling="yes" horizontalscrolling="no" verticalscrolling="yes"
이를 iFrame 태그에 넣으세요.
CSS에서 형식을 지정하려고 애쓰지 않아도 됩니다.
다른 팁
스크롤바는 <iframe>
, 이는 포함된 페이지의 속성입니다.넣어보세요 overflow-x: hidden
에 <html>
내부 페이지의 요소입니다.
iframe을 div 안에 넣은 다음 스크롤에 div를 사용할 수 있습니다.IE에서는 문제 없이 div의 스크롤을 제어할 수 있지만 IE에서는 실제로 iframe 스크롤에만 문제가 있습니다.다음은 트릭을 수행하는 간단한 예입니다.
<html>
<head>
<title>iframe test</title>
<style>
#aTest {
width: 120px;
height: 50px;
padding: 0;
border: inset 1px #000;
overflow: auto;
}
#aTest iframe {
width: 100px;
height: 1000px;
border: none;
}
</style>
</head>
<body>
<div id="aTest">
<iframe src="whatever.html" scrolling="no" frameborder="0"></iframe>
</div>
</body>
</html>
<iframe style="overflow:hidden;" src="about:blank"/>
IE에서 작동해야합니다.IE6에는 Overflow-x 및 Overflow-y를 지원하는 데 문제가 있었습니다.
또 한 가지 주목해야 할 점은 iframe의 IE 테두리는 camelCase에서 "frameborder" 속성을 설정한 경우에만 제거할 수 있다는 것입니다.
<iframe frameBorder="0" style="overflow:hidden;" src="about:blank"/>
CSS로 적절하게 스타일을 지정할 수 있으면 좋겠지만 IE에서는 작동하지 않습니다.
이러한 모든 솔루션은 나에게 적합하지 않았거나 만족스럽지 않았습니다.스크롤 가능한 DIV를 사용하면 가로 스크롤 막대를 없앨 수 있지만, 그러면 항상 세로 스크롤 막대가 표시됩니다.
따라서 모든 iframe의 고정 높이를 확실히 제어할 수 있는 내 사이트에서는 다음 솔루션이 매우 효과적입니다.단순히 DIV를 사용하여 가로 스크롤 막대를 숨깁니다. :)
<!-- This DIV is a special hack to hide the horizontal scrollbar in IE iframes -->
<!--[if IE]>
<div id="ieIframeHorScrollbarHider" style="position:absolute; width: 768px; height: 20px; top: 850px; left: 376px; background-color: black; display: none;">
</div>
<![endif]-->
<script type="text/javascript">
if (document.getElementById("idOfIframe") != null && document.getElementById("ieIframeHorScrollbarHider") != null)
{
document.getElementById("ieIframeHorScrollbarHider").style.display = "block";
}
</script>
iframe 내부에 포함된 페이지 본문 너비를 99%로 설정해 볼 수도 있습니다.