Why firefox4 is not able to display the li background color?_问答_开发者

Why firefox4 is not able to display the li background color?

开发者 https://www.devze.com 2023-03-18 03:21 出处：网络

I want to apply a background color to a forced inline element..It displays the background color in Ie7 however in firefox4, the color is not displayed..Why is that and how do I sort this out?

相关专题：css

I want to apply a background color to a forced inline element..It displays the background color in Ie7 however in firefox4, the color is not displayed..Why is that and how do I sort this out?

the Jsfiddle http://jsfiddle.net/ybYxq/

 <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{float:right;}

vimal try this.

remove the h1 tag from the li and add font styling to li.

the CSS should be.

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

the html should be

<!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>

this will work... try any problem just comment me. have a nice day...

Use classes instead. You apply to li but you need to apply to h1 too!

jsfiddle.net/ppumkin/ybYxq/1

You can also use * to apply to everything in li

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

Some more examples in this one

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

Indeed, it isn't working on Chrome either.

Try : #in li{background:#b2b2b2;} #in {float: right;}

Or either : #in li{display:inline-block; background:#b2b2b2;} #in {float: right;}

The second has problems with IE as I remember well.

You can recreate what happens in IE7 in every browser by setting the h1s to display: inline; background:#0CF instead of setting it on the lis:

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

Looks like the "blocky" h1 inside the "inline" li is interfering somehow. If you add:

#in li h1 { display:inline; }

you get the background (at least in Firefox 5).

Generally the styles from inline elements do not cascade down to block elements. (IE7 is just a bit buggy)If you change h1 to span(or set h1 as inline) everything will work.