Home > Article > Web Front-end > Why Doesn\'t `overflow: hidden` Work with `position: relative` in IE6 and IE7?
Why Doesn\'t `overflow: hidden` Work with `position: relative` in IE6 and IE7?
- Susan SarandonOriginal
- 2024-11-02 15:42:30155browse
IE6 and IE7 CSS Problem with "overflow: hidden" and "position: relative"
This problem arises when attempting to hide non-active slides in a slider using "overflow: hidden". In IE6 and IE7, this CSS property fails to function for elements with "position: relative" applied.
Consider the following isolated HTML structure:
<code class="html"><!DOCTYPE html>
<html>
<head>
<style>
body {
width: 900px;
}
ul {
width: 2000px;
left: -499px;
position: relative;
}
li {
display: block;
float: left;
}
.item-list {
overflow: hidden;
width: 499px;
}
</style>
</head>
<body>
<div class="item-list">
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</div>
</body>
</html></code>
The goal is to hide the non-active slides using "overflow: hidden" on the "item-list" div. However, this fails in IE6 and IE7 due to the "position: relative" style applied to the "ul".
The solution lies in adding "position: relative" to the container of the element in question. In this case, since "body" is the container, adding a "div" directly underneath it and setting its position to "relative" would resolve the issue.
The above is the detailed content of Why Doesn\'t `overflow: hidden` Work with `position: relative` in IE6 and IE7?. For more information, please follow other related articles on the PHP Chinese website!