解决firefox无法显示父级html标签背景

Posted on 2009-06-28 23:01  口亻亻口  阅读(381)  评论(0)    收藏  举报

由于firefox解析程序无法像ie一样广泛兼容各种css的写法，在父级html标签中定义的css中background样式会被其子html标签覆盖（尽管其子标签没有设置过background属性），而无法在网页上正常显示，经过试验和观察，发现原来父级html标签被叠在了最下面，现将父级标签的css class定义中加入 float:left 将父级html标签浮动起来，就能正常显示背景了。

例如，利用jquery制作的网站主菜单，示便代码如下，请注意其中的.menuContainer CSS Class中的样式定义.

 

 1 <html>
 2 <head>
 3     <title>上外在线</title>
 4     <style type="text/css">
 5 .menuContainer{ float:left;width:100%;BACKGROUND:url(../images/topnav_bg.gif) repeat-x;}
 6 ul.topnav{padding-right:20px; padding-left:20px; padding-bottom:0px; padding-top:0px; margin:0px; width: 100%; float:left; list-style-type: none;background: url(../images/topnav_bg.gif) repeat-x;}
 7 ul.topnav li {padding-right: 15px; padding-left: 0px; float: left; padding-bottom: 0px; padding-top: 0px; margin: 0px;  position: relative;}
 8 ul.topnav li a{padding-right:10px;padding-left:10px;padding-top:10px;padding-bottom:10px;display:block;float:left;text-decoration:none;color:#fff;}
 9 ul.topnav li a:hover{BACKGROUND: url(../images/topnav_hover.png) repeat-x center ;}
10 ul.topnav li span{background: url(../images/subnav_btn.png) no-repeat center top; float: left; width: 17px; height: 35px;}
11 ul.topnav li span.subhover {background-position: center bottom; cursor: pointer;}
12 ul.topnav li ul.subnav {background:#137fca;border-right: #137fca 1px solid; padding-right: 0px; border-top: #137fca 1px solid; display: none; padding-top: 0px;  padding-bottom:0px; border-bottom: #137fca 1px solid;  left: 0px; float: left; margin: 0px; border-left: #137fca 1px solid; padding-left: 0px; width: 170px; list-style-type: none; position: absolute; top: 35px; -moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-left-radius: 5px; -webkit-border-bottom-right-radius: 5px;}
13 ul.topnav li ul.subnav li {clear:both;padding-right:0px;padding-left:0px;padding-bottom:0px;padding-top:0px;margin:0px;width:170px;border-bottom:solid 1px #29a1ed;}
14 html ul.topnav li ul.subnav li a {padding-left:20px;float:left;width:140px;color:#fff;padding-top:5px;padding-bottom:5px;}
15 html ul.topnav li ul.subnav li a:hover {background: #0164b5 10px center;}
16     </style>
17     <script type="text/javascript" src="jquery/jquery-latest.js"></script>
18     <script type="text/javascript"> 
19 function initDropDownMenu()
20 {
21         $("ul.subnav").parent().append("<span></span>"); //Only shows drop down trigger when js is enabled - Adds empty span tag after ul.subnav
22         $("ul.topnav li span").click(function() { //When trigger is clicked
23     //Following events are applied to the subnav itself (moving subnav up and down)
24         $(this).parent().find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on click
25     $(this).parent().hover(function() {}, function(){
26         $(this).parent().find("ul.subnav").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up
27         });
28         //Following events are applied to the trigger (Hover events for the trigger)
29     }).hover(function() { 
30         $(this).addClass("subhover"); //On hover over, add class "subhover"
31         }, function(){    //On Hover Out
32             $(this).removeClass("subhover"); //On hover out, remove class "subhover"
33         });
34 }
35     $(document).ready(function(){initDropDownMenu();});
36     </script>
37 
38 </head>
39 
40 <body>
41     <div class="menuContainer">
42         <div style="margin:0 auto;width:900px;">
43              <ul class="topnav">
44           <li><a href="view.aspx?did=12&catalogId=1" target="_self">首页</a>
45             <ul class="subnav">
46                 <li><a href="http://royalzhou.cnblog.com/?catalogId=13" target="_self">上外在线菜单项1</a></li>
47                 <li><a href="?catalogId=14" target="_self">上外在线 菜单项2</a></li>
48             </ul>
49           </li>
50           <li><a href="view.aspx?did=4&catalogId=2" target="_self">关于我们</a></li>
51           <li><a href="view.aspx?did=5&catalogId=3" target="_self">学习指南</a></li>
52           <li><a href="view.aspx?did=6&catalogId=4" target="_self">统考英语</a></li>
53           <li><a href="addTrial.aspx?catalogId=5" target="_self">专业英语</a></li>
54           <li><a href="view.aspx?did=8&catalogId=6" target="_self">英语四六级</a></li>
55           <li><a href="view.aspx?did=9&catalogId=7" target="_self">中高级口译</a></li>
56           <li><a href="view.aspx?did=10&catalogId=8" target="_self">交际口语</a></li>
57           <li><a href="view.aspx?did=11&catalogId=9" target="_self">留学英语</a></li>
58           <li><a href="view.aspx?did=2&catalogId=10" target="_self">小语种</a></li>
59               </ul>
60         </div>
61     </div>
62 </body>
63 </html>