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 forgotten button tag
Note: This article has been translated by someone ...
How to connect to docker server using ssh
When I first came into contact with docker, I was...
A brief discussion on the execution order of JavaScript macrotasks and microtasks
Table of contents 1. JavaScript is single-threade...
Vue+SSM realizes the preview effect of picture upload
The current requirement is: there is a file uploa...
Analysis of the process of deploying Python applications in Docker containers
Simple application deployment 1. Directory struct...
Use of MySQL DATE_FORMAT function
Suppose Taobao encourages people to shop during D...
About the difference between inspecting elements and viewing the source code of a web page
I don’t know if you have noticed that when we ope...
Detailed explanation of MySql automatic truncation example
Detailed explanation of MySql automatic truncatio...
There is no make command in Linux (make: *** No target specified and no makefile or make command installation method found)
Notice! ! ! This situation can actually be avoide...
Vue component library ElementUI implements table loading tree data tutorial
ElementUI implements a table tree list loading tu...
Alibaba Cloud Server Linux System Builds Tomcat to Deploy Web Project
I divide the whole process into four steps: Downl...
Detailed explanation of the deployment process of SEATA transaction service Docker
1. Create a database authorization statement >...
Solve the Docker x509 insecure registry problem
After installing Docker, I encountered the x509 p...
Docker and Docker-compose one-click installation tutorial (supports online and offline)
Shell Script #!/bin/sh # Current directory CURREN...
Swiper.js plugin makes it super easy to implement carousel images
Swiper is a sliding special effects plug-in built...