Home Web Front-end CSS Tutorial How to solve overflow:auto invalid method in ie7

How to solve overflow:auto invalid method in ie7

Jun 25, 2018 pm 04:10 PM
overflow invalid

This article mainly introduces how to solve the overflow:auto invalid method in ie7. It has certain reference value. Now I share it with everyone. Friends in need can refer to it

Cause
When the style of the direct child element or subordinate child element of the parent element has the position:relative attribute, the overflow:auto of the parent element The properties will become invalid.

Solution
It is very simple to solve this bug. Use position:relative; in the parent element to solve the bug.

Code bug recurrence

<ul>
<li>我是很努力的前端博客,希望你会喜欢</li>
<li>我是很努力的前端博客,希望你会喜欢</li>
<li>我是很努力的前端博客,希望你会喜欢</li>
<li>我是很努力的前端博客,希望你会喜欢</li>
<li>我是很努力的前端博客,希望你会喜欢</li>
</ul>
Copy after login
ul{overflow:auto; height:100px;}
li{position:relative; height:30px; line-height:30px;}
Copy after login

There will be a strange bug in ie7, a scroll bar appears, but the scroll cannot be pulled strip. The solution is to ul{position:relative;}

IE7 float:right will wrap
I thought it would only appear in ie6 , I didn’t expect that IE7 also has this bug. Many people on the Internet said that the element of float:right should be placed at the front. This is such a bad idea. Sacrifice the position of an element to solve this bug. Sometimes you are a little speechless when you look at the code. The solution is to add a relative positioning to the parent layer, and then add an absolute positioning to the right side to achieve . I think this is more reliable.

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

About CSS writing standard order and naming rules

The above is the detailed content of How to solve overflow:auto invalid method in ie7. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Is H5 page production a front-end development? Is H5 page production a front-end development? Apr 05, 2025 pm 11:42 PM

Yes, H5 page production is an important implementation method for front-end development, involving core technologies such as HTML, CSS and JavaScript. Developers build dynamic and powerful H5 pages by cleverly combining these technologies, such as using the &lt;canvas&gt; tag to draw graphics or using JavaScript to control interaction behavior.

How to customize the resize symbol through CSS and make it uniform with the background color? How to customize the resize symbol through CSS and make it uniform with the background color? Apr 05, 2025 pm 02:30 PM

The method of customizing resize symbols in CSS is unified with background colors. In daily development, we often encounter situations where we need to customize user interface details, such as adjusting...

Why are the inline-block elements misaligned? How to solve this problem? Why are the inline-block elements misaligned? How to solve this problem? Apr 04, 2025 pm 10:39 PM

Regarding the reasons and solutions for misaligned display of inline-block elements. When writing web page layout, we often encounter some seemingly strange display problems. Compare...

The latest price of Bitcoin in 2018-2024 USD The latest price of Bitcoin in 2018-2024 USD Feb 15, 2025 pm 07:12 PM

Real-time Bitcoin USD Price Factors that affect Bitcoin price Indicators for predicting future Bitcoin prices Here are some key information about the price of Bitcoin in 2018-2024:

How to use the clip-path attribute of CSS to achieve the 45-degree curve effect of segmenter? How to use the clip-path attribute of CSS to achieve the 45-degree curve effect of segmenter? Apr 04, 2025 pm 11:45 PM

How to achieve the 45-degree curve effect of segmenter? In the process of implementing the segmenter, how to make the right border turn into a 45-degree curve when clicking the left button, and the point...

How to achieve segmentation effect with 45 degree curve border? How to achieve segmentation effect with 45 degree curve border? Apr 04, 2025 pm 11:48 PM

Tips for Implementing Segmenter Effects In user interface design, segmenter is a common navigation element, especially in mobile applications and responsive web pages. ...

How to control the top and end of pages in browser printing settings through JavaScript or CSS? How to control the top and end of pages in browser printing settings through JavaScript or CSS? Apr 05, 2025 pm 10:39 PM

How to use JavaScript or CSS to control the top and end of the page in the browser's printing settings. In the browser's printing settings, there is an option to control whether the display is...

The text under Flex layout is omitted but the container is opened? How to solve it? The text under Flex layout is omitted but the container is opened? How to solve it? Apr 05, 2025 pm 11:00 PM

The problem of container opening due to excessive omission of text under Flex layout and solutions are used...

See all articles