Solution to the horizontal scroll bar in iframe under IE6
|
The situation is as follows: (PS: The red box represents the iframe area, and the gray rectangle represents the width:100% element mentioned above. You need to use IE6 to see the effect.) When the height of the gray box is greater than the height of the iframe, vertical and horizontal scroll bars appear (under IE6). The effect is normal when the height of the gray box is smaller than the height of the iframe. Solution 1: Add style to the inner page: html { overflow-y: scroll; } When the height of the gray box is greater than the height of the iframe, only the vertical scroll bar appears, and the effect is correct. When the height of the gray box is smaller than the height of the iframe, the vertical scroll bar is still displayed (unavailable), which is flawed. Solution 2: Add style to the inner page: html { overflow-x: hidden; overflow-y: auto; } When the height of the gray box is greater than the height of the iframe, only the vertical scroll bar appears, but the content on the right is not fully displayed (PS: the text inside is "This is a div with a height of 200px"), and the effect is incorrect. When the height of the gray box is less than the height of the iframe, no scroll bar appears and the effect is correct. Solution 3: After many attempts, we still haven't found the perfect pure CSS solution, and we are pursuing the most perfect effect. Since pure CSS can't solve the problem, we have to use JS. Through the previous test, we found that when the height of the gray box is less than the height of the iframe, no processing is required to achieve the correct effect, and when the height of the gray box is greater than the height of the iframe, solution one is perfect. Therefore, our js has the following idea: when the browser is IE6 and the content height is higher than the iframe, add the style of solution 1 to the html tag. Here is the jQuery code: (The idea is the same without jQuery.) Copy code The code is as follows:$(function(){ if($.browser.msie&&$.browser.version=="6.0"&&$("html")[0].scrollHeight>$("html").height()) $("html").css("overflowY","scroll"); }); When the height of the gray box is greater than the height of the iframe, only the vertical scroll bar appears, and the effect is correct. The effect is correct when the height of the gray box is smaller than the height of the iframe. Learn to be happy every day (: |
>>: CSS implements the web component function of sliding the message panel
Recommend
The difference between shtml and html
Shtml and asp are similar. In files named shtml, s...
Add a floating prompt for the header icon in the ElementUI table
This article mainly introduces how to add floatin...
How to write the style of CSS3 Tianzi grid list
In many projects, it is necessary to implement th...
Notes on Using Textarea
Why mention textarea specifically? Because the tex...
JavaScript to achieve the effect of clicking on the submenu
This article shares the specific code of JavaScri...
How to build php-nginx-alpine image from scratch in Docker
Although I have run some projects in Docker envir...
Pagination Examples and Good Practices
<br />Structure and hierarchy reduce complex...
Vue's vue.$set() method source code case detailed explanation
In the process of using Vue to develop projects, ...
Detailed explanation of the encapsulation and use of the Vue image magnifier component
Based on the Vue image magnifier component packag...
Example of using CSS3 to customize the style of input multiple-select box
Principle: First hide the input element, then use...
Detailed installation process of mysql5.7.21 under win10
This article shares the installation of MySQL 5.7...
Detailed explanation of the use of nohup /dev/null 2>&1
nohup command: If you are running a process and y...
CSS imitates Apple's smooth switch button effect
Table of contents 1. Code analysis 2. Source code...
MySQL uses mysqldump+binlog to completely restore the deleted database principle analysis
1. Overview In the daily operation and maintenanc...
jQuery achieves full screen scrolling effect
This article example shares the specific code of ...