Question

我想将背景颜色应用于强制内联元素。它在Ie7中显示背景颜色但是在firefox4中，颜色不显示。为什么这样，我该如何排序呢？

 <ul id="in">
                <li><h1>sfffffh</h1></li>
                <li><h1>QssssfffffhQ</h1></li>
                <li><h1>ZssssssZ</h1></li>
            </ul>

CSS #in li {background：＃0CF; display：inline;} #IN {浮动：右;}

Answer 1

改用类。你申请了li，但你也需要申请h1！

jsfiddle.net/ppumkin/ybYxq/1

您还可以使用*来应用li中的所有内容

.in li *{background-color:red; display:inline;}

这一个中的更多例子

http://jsfiddle.net/ppumkin/ybYxq/6/

Answer 2

事实上，它也不适用于Chrome。

尝试： #in li {background：＃b2b2b2;} #in {float：right;}

或者是： #in li { display：inline-block ;背景：＃b2b2b2;} #in {float：right;}

第二个问题与IE有关，我记得很清楚。

Answer 3

您可以通过将h1设置为display: inline; background:#0CF而不是在li s上设置，在每个浏览器中重新创建IE7中发生的事情：

http://jsfiddle.net/ybYxq/3/

Answer 4

vimal尝试这个。

从li中删除h1标签并将字体样式添加到li。

CSS应该是。

#in li{background-color:#171817;display:inline; color: white; font:12px Tahoma;}
#in{float:right;}

html应该是

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

</head>

<body>


                <ul id="in">
                    <li>sfffffh</li>
                    <li>QssssfffffhQ</li>
                    <li>ZssssssZ</li>
                </ul>


</body>
</html>

这将有效...尝试任何问题只是评论我。祝你有美好的一天......

Answer 5

看起来“内联”里面的“块状”h1正在以某种方式干扰。如果你添加：

#in li h1 { display:inline; }

你得到了背景（至少在Firefox 5中）。

Answer 6

通常，内联元素的样式不会级联到块元素。（IE7只是有点儿错误）如果将h1更改为span（或将h1设置为inline），一切都会起作用。< / p>

为什么firefox无法显示li背景颜色？

6 个答案: