IE6下DIV高度显示的Bug

2016-02-19 16:58 6 1 收藏

下面,图老师小编带您去了解一下IE6下DIV高度显示的Bug,生活就是不断的发现新事物,get新技能~

【 tulaoshi.com - Web开发 】

IE6下默认的字体尺寸大致在 12 - 14px 之间,当你试图定义一个高度小于这个默认值的 div 的时候, IE 会固执的认为这个层的高度不应该小于字体的行高。所以即使你用 height: 6px; 来定义了一个 div 的高度,实际在 IE 下显示的仍然是一个 12 px 左右高度的层。

要解决这个问题,可以强制定义该 div 的字体尺寸,或者定义 overflow 属性来限制 div 高度的自动调整。比如 div style="height: 6px; font: 0px Arial;"/div 或者 div style="height: 6px; overflow: hidden;"/div 都可以阻止 IE 的自作聪明。

该问题在 IE7 / Firefox /Opera 下均不存在。

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

div style="height: 6px; overflow: hidden;"在Firefox中显示时存在有问题,例:

div id="idAnswer" class="ans_ques"
div class="ans_ques_top"/div
div class="ans_ques_content"

!--

div class="ans_ques_bg_orange"
h4
div class="ans_ques_h_bg"
span我要提问/span
img src="templets/img/squid_decoration.jpg" width="56" /
/div
/h4
p我们为您开通官网自助问题提交系统,我们客服专员会第一时间为您处理!/p
/div
/div

--

div class="ans_ques_bottom"/div
/div

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

类ans_ques_top为上背景图,类ans_ques_bottom为下背景图,这样设计的结果将会导致类ans_ques_top向右偏移。

来源:http://www.tulaoshi.com/n/20160219/1613754.html

延伸阅读
标签: Web开发
问: css+div做的网页在ie7里错位了,在ie6里好好的,这个在css里可以改吗? 答: 用CSS+DIV来写网站代码的好处显而易见,这里不多说了,但由于不同浏览器对CSS的解释不统一,造成不同浏览器下页面错位的现象十分常见 cs.Phontol.com页面乱的原因是因为IE6认为一个DIV超宽了,所以把本应float;right的DIV挤了下去。Phontol.com而如果设...
标签: Web开发
一 css的优先级 今天有人跟我说css hack中用!important来区分ie6,因为ie6不支持!important,是的在很早以前我也是用过这种方法写hack,但是后来就基本不用了。本来我对他谁的ie6不支持!important也没什么异议,可是正好在前几天正好用个这个!important属性解决了一个样式优先级的问题,而且是支持ie6的,这是为什么呢?到底ie6支不支持!...
标签: Web开发
经常会有人问我 IE6下如何让PNG图片变透明 ,实际上IE6浏览器无法显示透明的PNG图片,这也让许多网页设计师头疼的事,一些很好的效果页面就因为无法透明显示PNG图片,所以不得不应做成JPG。 也有许多方法试图解决这一问题,但现在只需要使用一个叫做Unit PNG Fix的JS文件就能完全搞定。 该JS的下载地址:http://labs.unitinteractive.com...
标签: Web开发
HTML 的空白符处理规则 HTML 中的空白符包括空格 (space)、制表符 (tab)、换行符 (CR/LF) 三种。 我们知道,在默认情况下,HTML 源码中的空白符均被显示为空格,并且连续的多个空白符会被视为一个,或者说,连续的多个空白符会被合并。 然而在有些时候,我们希望 HTML 源码中的多个连续空格在网页浏览器中可以真实地呈现,或者需要源码...
标签: Web开发
在处理css的机制上,IE总是有很多让人吐血的举动,但对于他们现在的改进力度还是值得高兴的。 就拿对伪类:hover的支持来说,IE7+终于添加了对a以外其它标签的支持。对于这样的改进,当然是要拍手称快的,但在IE6下,:hover就连对a的支持都不是那么的尽如人意。下面就是我想简单说的一个关于:hover在IE6及更早浏览器下的问题。 很多...

经验教程

527

收藏

86
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部