飞龙博客

妙法莲华经

important样式忽略和高度溢出导致div重叠解决方案

feilong.org 修订于2008-05-07 01:39:00 190 次浏览

飞龙这次做了个试验,学习探讨样式css最头疼的问题:IE与firefox浏览器显示差别如此大!包括important忽略、div层重叠等浏览器不兼容问题。好了,跟随飞龙把下面这个网页代码复制到dreamweaver里面做试验吧。什么需要可以来这里(www.feilong.org)和飞龙交流讨论。你注意到了吗?IE与firefox浏览器显示差别大得让飞龙大吃一惊!

  一 参数!important 对样式属性的影响取舍不同,ie忽略这个。

  1.如果把带!important后缀的样式放在前面,ie浏览器忽略!important后缀、而选择不带!important后缀的样式来显示。但firefox优先选择带!important后缀的样式来显示。哈哈,ie啊!

  2.如果把带!important后缀的样式放在后面,ie浏览器也ie浏览器忽略这个后缀,但是这次并没有选择不带!important后缀的样式,因为ie认为同一个属性设置发生重复时候,以后来飞龙"反悔"的那个样式为准?哈哈。这次firefox还是优先选择带!important后缀的样式来显示。两浏览器这次边框颜色一样,飞龙认为不过是css挑选巧合,其实他们秉性各自依然没改!

  这种带!important后缀并且放在前面的处理方式,有时能帮你解决代码正确,但两者显示老不一致的烦恼。但飞龙(www.feilong.org)提示不要滥用哟!

  二 当设定固定高度发生溢出后表现不同,有div重叠。

  同时,细心的你肯定会注意到:上面的层设定固定高度,与层里内容的高度是不一致的,也就是有高度溢出!看看这个时候IE与firefox浏览器默认处理方式和表现有什么不同?

  ie浏览器表现为:背景色跟着一起溢出,高度跟着一起自适应,也就是忽略你设定的固定高度。而firefox等浏览器呢,背景色就按你设定的固定高度走,还有下面的under 层竟然与上面的div层发生重叠了!区别太明显了!

  飞龙有切身之痛:这预先设定的固定高度啊,就是在firefox里面与下面div层重叠的罪魁祸首!怎么解决呢?飞龙提供的div重叠解决方案是:把固定高度按层里内容实际告诉设置准确;或者不设置高度,让important层的高度完全自适应吧,不要让羞涩的支持css标准firefox左右为难哈哈!呵呵,支持css标准的firefox浏览器下载资料:http://feilong.org/css-firefox-firebug

  博主:飞龙.org
  链接:http://feilong.org/css-important-div-chongdie
  网络资料,朋友共享,http://feilong.org 可加入收藏夹。转载请保留上面文字。

---------------飞龙提供代码如下------------------------------
http://feilong.org/code/important-maxthon-firefox-jianrong.htm

更新网址:https://feilong.org/css-important-div-chongdie
最初发布:20080507 01:39:00 feilong.org 于广州

加入收藏夹,查看更方便。

所在分类: 网站开发

新作:

旧文: