IE中子栏目使用float属性后背景不能正常显示原因及解决
2007-05-24 17:21
656 查看
IE浏览器对于CSS的支持很不完整,如下代码,在FireFox能够正常显示出背景,但是在IE中却不可以。
HTML:
<div class="titlebody">
<div class="cqsub">
<div class="cqsubtitle">培养方案</div>
</div>
<div class="cqsub">
<div class="cqsubtitle">学籍指导</div>
</div>
</div>
CSS:
.cqsub{
width:50%;
float:left;
}
.titlebody{
background-image:url('../img/subb.jpg');
background-repeat:repeat-y;
}
由于在cqsub类中使用了float:left;属性,而IE在使用这个属性的时候,如果没有定义上层的高度,在计算的时候会出现错误,导致定义的背景图片不能显示。
解决方法:在.titlebody中添加height:1px;的定义,迫使IE浏览器重新计算其高度,从而正常显示背景。但是此时FireFox中会老老实实地采用高度为1px的定义,这显然有问题的。因此还必须使用CSS Hack方法,添加代码:
[xmlns] .titlebody{
height:auto;
}
这行代码只能由FireFox解释,对IE6.0及以下版本完全透明,从而达到兼容的目的。
以上代码在FireFox,IE6.0,DreamWeaver8中调试通过。
HTML:
<div class="titlebody">
<div class="cqsub">
<div class="cqsubtitle">培养方案</div>
</div>
<div class="cqsub">
<div class="cqsubtitle">学籍指导</div>
</div>
</div>
CSS:
.cqsub{
width:50%;
float:left;
}
.titlebody{
background-image:url('../img/subb.jpg');
background-repeat:repeat-y;
}
由于在cqsub类中使用了float:left;属性,而IE在使用这个属性的时候,如果没有定义上层的高度,在计算的时候会出现错误,导致定义的背景图片不能显示。
解决方法:在.titlebody中添加height:1px;的定义,迫使IE浏览器重新计算其高度,从而正常显示背景。但是此时FireFox中会老老实实地采用高度为1px的定义,这显然有问题的。因此还必须使用CSS Hack方法,添加代码:
[xmlns] .titlebody{
height:auto;
}
这行代码只能由FireFox解释,对IE6.0及以下版本完全透明,从而达到兼容的目的。
以上代码在FireFox,IE6.0,DreamWeaver8中调试通过。
相关文章推荐
- IE下CSS属性float:right下移换行或不显示的问题原因及解决
- VC6里改变对话框资源ID号后classwizard不能正常显示控件ID的原因及解决方法
- html:optionsCollection 的 filter 过滤属性使用心得 - 解决空格不能显示的问题
- 在使用Jquery的时候明明checked属性存在但是attr('checked')却显示undefine的原因以及解决方法
- 图片路径中含有中文在jsp下不能正常显示的原因及解决
- 【Vegas原创】访问owa,图片和js脚本不能正常显示和使用的解决方法
- 图片路径中含有中文在jsp下不能正常显示的原因及解决
- 【Vegas原创】访问owa,图片和js脚本不能正常显示和使用的解决方法
- Win7收藏夹不能正常使用的几大原因分析及解决
- IE 8.0 下 eWebEditor不能正常使用的解决办法
- [转贴]不能显示树型或树控件使用不正常的解决办法
- secureCRT连接esxi使用esxtop不能正常显示的解决办法
- div css用float时引起背景不正常显示的解决办法
- div+css总结—FF下div不设置高度背景颜色或外边框不能正常显示的解决方法(借鉴)
- 【Vegas原创】访问owa,图片和js脚本不能正常显示和使用的解决方法
- 给swf影片添加背景图片、IE显示正常,但chrome没有显示-解决办法
- 使用struts bean:write标签时不能显示Integer,BigDecimal等类型的属性问题的解决
- 使用struts bean:write标签时不能显示Integer,Date等类型的属性问题的解决
- Silverlight在IE中无法显示但在Firefox中正常的原因和解决办法
- 关于CSS中内层使用float导致外层的背景无法显示的问题的解决