欢迎光临杨雨的个人博客站!

杨雨个人网站-杨雨个人博客-杨照佳

杨雨个人博客网站

关注互联网和搜索引擎的个人博客网站

首页 > WEB开发 > css3案例分享 >

IE CSS Bug系列:列表元素背景不显示

发布时间:2013-12-27  编辑:杨雨个人博客网站   点击:   


<div>
    <ul>
        <li>one</li>
        <li>two</li>
        <li>three</li>
    </ul>
</div>
 
<div>
    <dl>
        <dt>Foo:</dt>
            <dd>Bar</dd>
        <dt>Baz:</dt>
            <dd>Ber</dd>
    </dl>
</div>
IE 浏览器不支持很多 CSS 属性是出了名的,即便在支持的部分中,也是有很多 Bug 的。Zoffix Znet 整理了 IE 中的 CSS 问题,有简单的问题示例,也有解决方法。 这个系列共有 58 个指南,70 个解决方案。

列表元素背景不显示的BUG

受影响版本

该BUG影响: IE6

表现

<li>,<dt>,<dd>等元素的背景不显示

教程日期

2009-07-19 17:05:40 星期日

描述

举个例子来说,对于一个<div>元素,将其设置position:relative。然后在<div>内添加<ul>,<ol>或者<dl>,并且给这些列表项设置背景。在IE下会发现背景不显示。

示例

根据这个BUG特性构造的一个示例在一个单独页面上。

HTML 代码:

<div>
    <ul>
        <li>one</li>
        <li>two</li>
        <li>three</li>
    </ul>
</div>
 
<div>
    <dl>
        <dt>Foo:</dt>
            <dd>Bar</dd>
        <dt>Baz:</dt>
            <dd>Ber</dd>
    </dl>
</div>
CSS 代码:

div {
    float: left;
    position: relative;
    clear: left; /* not related to the bug */
}
 
dt, dd, li {
    background: #f00;
}
这个是一个布局方面的BUG。因为IE浏览器不会将这些表单项拆分开,所以我们无法为表单项设置布局。

解决方案

下面是按照解决方案类型排序的对上述问题的解决方案。

解决方案(最佳方案)

解决方案日期
2009-07-19 17:20:24 星期日
修复版本

所有受影响版本

描述
正如我前面提到的那样,这个BUG可以确定是因为想要设置表单项的布局。但是可能是因为给<div>设置的float导致了被拆分失败。让我们先看一下修复后的示例: 根据这个BUG特性构造的一个示例在一个单独页面上。
HTML 代码:
<div>
    <ul>
        <li>one</li>
        <li>two</li>
        <li>three</li>
    </ul>
</div>
 
<div>
    <dl>
        <dt>Foo:</dt>
            <dd>Bar</dd>
        <dt>Baz:</dt>
            <dd>Ber</dd>
    </dl>
</div>

CSS代码:

div {
    float: left;
    position: relative;
    clear: left; /* not related to the bug */
}
 
dt, dd, li {
    background: #f00;
    position: relative;
}
我们通过把表单项的position属性设置为relative修复了这个BUG。简单而完美!
 

本文地址:http://itbyc.com/web/css3/96.html
转载请注明出处。
分享是一种快乐,也是一种美德:
博客首页 | WEB开发 | 网站运营 | CMS使用教程 滇ICP备14002061号-1