技术头条 - 一个快速在微博传播文章的方式     搜索本站
您现在的位置：首页 --> CSS/HTML --> 消失的列表背景

消失的列表背景

浏览:2160次  出处信息

IE6中设定了position: relative; float: left的容器下，如果存在着多个带有背景的列表，那么这些列表中有一部分会显示不正常，具体的表现为背景消失。例如下面的代码（请在IE6中查看）：

以下是代码片段：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>TEST</title>
</head>
<style type="text/css">
 #container {
  position: relative;
  float: left;
 }
 #container li {
  background: red;
 }
</style>
<body>
 <div id="container">
  <ul>
   <li>Hello Kitty</li>
   <li>Hello Kitty</li>
   <li>Hello Kitty</li>
   <li>Hello Kitty</li>
   <li>Hello Kitty</li>
  </ul>
  <ul>
   <li>Hello Kitty</li>
   <li>Hello Kitty</li>
   <li>Hello Kitty</li>
   <li>Hello Kitty</li>
   <li>Hello Kitty</li>
  </ul>
  <ul>
   <li>Hello Kitty</li>
   <li>Hello Kitty</li>
   <li>Hello Kitty</li>
   <li>Hello Kitty</li>
   <li>Hello Kitty</li>
  </ul>
 </div>
</body>
</html>

解决的方法是给li也加上position: relative。这个BUG的具体描述，请参考：http://www.positioniseverything.net/explorer/ie-listbug.html

建议继续学习：

  1. 浏览器对居中的背景图片的兼容性    (阅读：2772)
  2. 一张背景实现自适应九宫格    (阅读：2559)
  3. 缩小窗口<body>背景被裁掉    (阅读：2395)
  4. 两侧背景自动延伸的CSS实现方法    (阅读：2350)
  5. 渐变背景上的内容垂直居中    (阅读：2275)
  6. 一个标签应用三个背景图片    (阅读：2259)
  7. 改善IE6中a与a:hover的背景支持    (阅读：1979)
  8. 页面元素的背景及boder被裁掉    (阅读：1905)
  9. 无缝背景的推荐    (阅读：1987)
  10. 搜索结果显示：栅格视图还是列表视图？    (阅读：1848)
QQ技术交流群：445447336，欢迎加入！
扫一扫订阅我的微信号：IT技术博客大学习
<< 前一篇：IE6，IE7中负缩进的问题
后一篇：让IE支持RGBa的背景色 >>
文章信息
© 2009 - 2024 by blogread.cn 微博：@IT技术博客大学习

京ICP备15002552号-1