Issue with iFrame and overflow:hidden in IE11
Question
I am running into an issue that apparently only exists in IE 11. This is for an intranet page. The relevant code is below.
<!DOCTYPE HTML>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<meta http-equiv="X-UA-Compatible" content="IE=11" />
<title>Result</title>
</head>
<body>
<div id="chatcontent">
<iframe class="noscrolling" src="intranetsharepoint" target="_blank" scrolling="no"></iframe>
</div>
</body>
</html>
stylesheet.css
body {
background-color: #F0F8FF;
}
#chatcontent{
width:20%;
margin: auto;
}
.noscrolling{
height: 50px;
width: 120px;
overflow: hidden;
border: 0;
overflow-x: hidden;
overflow-y: hidden;
}
iframe{
overflow-x: hidden;
}
I have been banging my head against the wall trying to figure out why, in all of the other browsers, the scrollbars disable themselves, but in IE 11 they refuse to sod off in the iFrame element. It works just fine when putting overflow: hidden in the body, can't scroll anywhere, only seems to not work in iFrame . I have tried every variation of overflow: hidden , scrolling=no, forcing html 4 via !DOCTYPE declaration, compatibility with older versions of IE, and nothing seems to be working. Any advice at this point would be a godsend. I saw a snippet of code that would have made an iFrame out of JS, but I don't understand enough of the language to put it together with what I already have. Any help would be greatly appreciated. It works as intended in Chrome and FF.
2 answers
solution1
1 2016-05-12 23:02:24
在 IFRAME 的 SRC 中添加 URL 使滚动条在 IE11 中消失（已测试）。
solution2
0 2016-05-12 22:57:15
It may have something to do with the code INSIDE of the IFrame. Try posting that in your question. Also, you can research AJAX for JavaScript, and create a type of IFrame out of AJAX. Like you said before, it IS a bit confusing at first, comment on my answer if you need me to give a complete example. Here is a link to a basic example of AJAX: http://www.w3schools.com/ajax/ajax_xmlhttprequest_send.asp
This will let you get the content of a page, copy and paste it into a div, and make it be a type of IFrame. Then, you can also edit the code of the page, and set the attributes necessary (overflow:hidden) to the div.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.