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

How to solve overflow:auto invalid method in ie7

不言
Release: 2018-06-25 16:10:35
Original
2830 people have browsed it

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!

Related labels:
source:php.cn
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template