有关在FireFox中上层高度不影响下层的解决办法
2009-06-25 18:44
477 查看
在写网站时,遇到一个差点让我抓狂的事情。以下是一个很简单的网页:
在这个网页中,创建了三个层,上面两个层是并列的,下面一个层是单独的,在IE中浏览可以达到我想要的结果,如下图所示:
在上图中,左边的层用于输出文章内容,右边的层用于输出树型菜单,下面的层用于输出版权信息。整个网站都做完之后,突然想起在FireFox中测试一下效果,看看是否兼容,没想到在Firefox中的效果居然完全不同。如下图所示。
从上图中可以看出,左边的层并没有将下面的层“挤”下去,而是超过了下面的层。这么一来,版权信息就会横在文章内容之中了。如果仅仅只是Firefox是这样的话,也就算了,可是连Opera、Flock都是这种显示结果,让我不得不改了,研究了很久,终于让我找到了一个解决方法,就是在下面的层上加上“clear:both”,如下所示:
最后结果如下所示,一切OK。
<!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> <title> 有关在FireFox中上层高度不影下层的解决办法 </title> </head> <body> <div style="width:500px;"> <div style="float:left; width:200px; background-color:#F9C7CF"> 上一层,放在左边<br /> 上一层,放在左边<br /> 上一层,放在左边<br /> </div> <div style="float:right;width:300px; background-color:#00FFFF"> 上一层,放在右边 </div> <div style="text-align:center; background-color:#F0F082; width:500px;"> 下一层,放在下面 </div> </div> </body> </html>
在这个网页中,创建了三个层,上面两个层是并列的,下面一个层是单独的,在IE中浏览可以达到我想要的结果,如下图所示:
在上图中,左边的层用于输出文章内容,右边的层用于输出树型菜单,下面的层用于输出版权信息。整个网站都做完之后,突然想起在FireFox中测试一下效果,看看是否兼容,没想到在Firefox中的效果居然完全不同。如下图所示。
从上图中可以看出,左边的层并没有将下面的层“挤”下去,而是超过了下面的层。这么一来,版权信息就会横在文章内容之中了。如果仅仅只是Firefox是这样的话,也就算了,可是连Opera、Flock都是这种显示结果,让我不得不改了,研究了很久,终于让我找到了一个解决方法,就是在下面的层上加上“clear:both”,如下所示:
<!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> <title> 有关在FireFox中上层高度不影下层的解决办法 </title> </head> <body> <div style="width:500px;"> <div style="float:left; width:200px; background-color:#F9C7CF"> 上一层,放在左边<br /> 上一层,放在左边<br /> 上一层,放在左边<br /> </div> <div style="float:right;width:300px; background-color:#00FFFF"> 上一层,放在右边 </div> <div style="text-align:center; background-color:#F0F082; width:500px; clear:both;"> 下一层,放在下面 </div> </div> </body> </html>
最后结果如下所示,一切OK。
相关文章推荐
- FireFox中上层高度不影下层的解决办法
- 有关firefox不响应window.event的解决办法
- 有关ie浏览器怪异模式(Quirks Mode)对 HTML 页面的影响的解决办法
- FireFox下解决div父容器高度自适应的几种办法(转)
- div布局-子容器设置浮动对于父容器高度自适应产生影响的解决办法
- input在Firefox和Chrome中高度不同的解决办法
- 有关firefox下信息显示不全的解决办法
- 有关firefox不响应window.event的解决办法
- javascript和css在ie和firefox中关于兼容性问题的解决办法
- BottomSheetDialog高度不足够显示全部内容的解决办法
- Selenium不支持firefox3的解决办法
- [转帖]IE与firefox的js和css的区别及解决办法 -- 供参考学习用
- Css_浮动元素外层容器无高度的解决办法
- Firefox 火狐浏览器无法安装firebug 解决办法
- 有关Transaction not successfully started问题解决办法
- UIPanGestureRecognizer手势影响UISlider拖动的问题及解决办法
- firefox 3.6.12 不能打开gmail的buzz,setting和chat 解决办法
- IE浏览器和Firefox浏览器兼容性问题及解决办法
- IPv6规模部署对业务风控的影响和解决办法
- Ubuntu下Firefox播放mp3显示HTTP "Content-Type" of "audio/mpeg" is not supported错误的解决办法