Shulou(Shulou.com)06/03 Report--

This article focuses on "how to solve the problem that absolute positioning elements do not show hidden under ie6". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "how to solve the problem that absolute positioning elements do not show hidden under ie6".

Problem description:

In ie6, if a floating element is adjacent to an absolute positioning element, in some cases the absolute positioning element will disappear.

Cause:

Only if the width of the floating element adjacent to the absolute positioning element is greater than the width of the parent layer minus 3 (that is, if the width of the parent layer is 300px, the width of the floating element is greater than 297px), the absolute positioning element is hidden under ie6.

Html:

The code is as follows:

Absolutely positioned elements are not displayed under ie6

Floating element

Absolute positioning element

Css:

The code is as follows:

.w {border:3px solid # 000Trachefffff exchangeable heightVOBG 200pxpositionPROTIFFOR WidthFOR 300px;}

.pa {background:orange;height:100px;position:absolute;right:10px;top:10px;width:100px;}

.fl {background:gray;float:left;height:100px;width:100%;}

Ie6 browser effect:

Other browser effects:

Solution:

1. Adjust the width of the floating element, that is, the width is less than or equal to the parent layer width minus 3

Add an empty div between the floating element and the absolute positioning element (recommended).

Or take the above example as a reference:

The code is as follows:

Absolutely positioned elements are not displayed under ie6

Floating element

Absolute positioning element

Ie6 browser and other browser effects:

At this point, I believe you have a deeper understanding of "how to solve the problem that absolute positioning elements do not show hidden under ie6". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.