解决firefox无法显示父级html标签背景
2009-06-28 23:01
483 查看
由于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>
例如，利用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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 【转载】AngularJS 用$sce服务来过滤HTML标签，解决无法正确显示后台传递的html标签
- umeditor无法显示包含html、body标签解决办法
- HTML&CSS——css中设定的背景图片无法显示的解决方法
- 如何解决HTML存到数据库后无法解析显示HTML标签
- 解决JSON包含HTML标签无法显示的问题
- 解决json包含html标签无法显示的问题
- html中frameset标签无法正常显示原因分析及解决
- 关于CSS中内层使用float导致外层的背景无法显示的问题的解决
- IE6下背景图无法显示问题解决方案
- 解决 asp.net 伪静态 IIS设置后 直正HTML无法显示的问题
- 解决Firefox下背景不显示的问题
- 一款超超漂亮的显示时间特效(embed html标签)，有透明背景和白色背景
- css中设定的背景图片无法显示的解决方法 .
- GridView中数据源中包含html标签显示问题的解决方法
- 解决java中html转word文档，转成功后的word文档在断网情况下无法显示图片问题
- html浮动效果无法显示解决办法
- Chrome的bug解决办法：overflow导致a标签无法显示
- Ubuntu自己下的firefox无法固定到启动器且无法显示图标解决方法
- Silverlight在IE中无法显示但在Firefox中正常的原因和解决办法