当前位置: 网站建设 > 网页设计 > 建站经验 >

如何解决Firefox检测不到div高度问题

时间:2013-03-02 04:00来源:未知 作者:admin 点击:

标签:如何解决Firefox检测不到div高度问题 如何(201)解决(48)高度(18)检测(4)Firefox(14)问题(68)div(47)不到(2)
针对这种情况有三种解决方法: 1.给box增长一个高度 直接在CSS中给#box增添一个高度属性,好比height:125px;。 这种方法的长处是简单,毛病是使div不会按内容的高度主动适应。 2.增添一个消除浮动元素 这种方法通常是加入一个带有清除属性的元素,个别都是加入一个div,例如: 在CSS中增加.clear {clear:both;},在Html中参加div class=clear/div,如图三所示。 这种方法的优点是使用简单,缺点是要在每一个带浮动的div内都要加一个清除的div。 3.
如何解决Firefox检测不到div高度问题》文章地址:http://www.tfxk.com/wangyesheji/jianzhanjingyan/0302340N2013.htm


针对这种情况有三种解决方法:

1.给box增长一个高度

直接在CSS中给#box增添一个高度属性,好比height:125px;。

这种方法的长处是简单,毛病是使div不会按内容的高度主动适应。


2.增添一个消除浮动元素

这种方法通常是加入一个带有清除属性的元素,个别都是加入一个div,例如:

在CSS中增加.clear {clear:both;},在Html中参加<div class="clear"></div>,如图三所示。

这种方法的优点是使用简单,缺点是要在每一个带浮动的div内都要加一个清除的div。


3. 用CSS伪元素:after

伪元素:after是在元素内容的最后面插入内容,应用它可以在box后插入一个肃清浮动的元素,CSS代码如下:



这段CSS是在box的最后插入一个不显示单暗藏掉的“.”,它可以扫除浮动,可以起到效果,而且IE阅读器不支撑:after伪元素,所以对它毫无影响。

这种方法的优点是只要要在CSS代码中操作即可,不需要在Html中加任何代码,真正做到了“分别”,缺陷是每一个id都要在CSS中加一段清除代码,不外结合上面的第二种方法,这种方法的缺点可以得到改良,如何解决CSS在IE8下的兼容性问题,由此进化出第四种方法——将class和伪元素联合,让内部带有浮动的div被带有清除属性的class定义。

实在做起来很简略,先用第三种办法的CSS定义一个class,CSS代码如下:

 

<div id="box" class="clear">
<div id="left">left</div>
<div id="right">right</div>
</div>



Html代码:

<style type="text/css">
<!--
body {
font-size: 12px;
}
#box {
background:#fafafa;
border:1px solid #dfdfdf;
padding:20px;
width:300px;
}
#left,
#right {
width:120px;
height:120px;
border:1px solid #00a1e9;
background:#ddf4ff;
text-align:center;
}
#left {
float:left;
}
#right {
float:right;
}
-->
</style>,如何能让网站配色方案更吸引人?; Tag:   Firefox   Div高度       Firefox   Div高度     解决方法:

如上图做页面,常常会被浏览器兼容性搞的头大,由于当初的浏览器真的是太多太多了。有个友人问我,在用Div和Css做页面的时候,为什么Div在Firefox中的高度不是自适应的,如何编写优质的需求文档?背景随高度缩在一起?而在IE中所有正常。

这是因为div中的内容使用了浮动float属性,以至Firefox不检测到高度而发生问题,而IE则可以畸形检测到高度,所以对IE和Firefox须要离开看待。

 如图一中所示,在外部名为box的div中包括了两个div,左边的为left,向左浮动,右边的为right,向右浮动,CSS跟Html代码如下:

CSS代码:

<div id="box">,如何编写优质的API文档;
<div id="left">left</div>,如何给网页加密;
<div id="right">right</div>
</div> #box:after {
height:0;
content:".";
clear:both;
display:block;
visibility:hidden;
}



写好这段CSS之后,让所有被浮动后果去掉高度的div的class是clear就能够了,比方:


.clear:after {
height:0;
content:".";
clear:both;
display:block;
visibility:hidden;
}
--> [网站建设之]如何解决Firefox检测不到div高度问题



在IE中的效果和图一中效果雷同,但在Firefox中效果如图二所示,背景随高度缩到了顶部。



这种方式可以算是无懈可击了,请你释怀应用!

以上三种方法都可以解决Firefox检测不到div高度的问题,详细使用哪种,还看你的情形和感到,这里仅作为参考,盼望对你有所辅助。


(责任编辑:网站建设)
如何解决Firefox检测不到div高度问题相关文章
上一篇:如何解决CSS在IE8下的兼容性问题 下一篇:如何解决IE7和FF浏览器无法撑开高度的问题
回到顶部