important的妙用解决firefox和ie的css兼容问题

所属分类: 网页制作 / CSS 阅读数: 626
收藏 0 赞 0 分享
对于某些内容可变的层(比如用户评论),我们希望它有个最小的高度 (比如30px),这样的话,即使内容只有一行字,也不会太难看;同时又希望在内容比较多的时候,层的高度能自动撑开,也就是要求height: auto。这时候就可以设置css的min-height属性。min-height在Firefox里有效,但IE无法识别。 可以使用下面这个解决方案:

复制代码
代码如下:

.div_class{
min-height:30px;
height:auto !important;
height:30px;
}

第一行设置 min-height:30px;对Firefox有效;第二行height:auto !important;也对Firefox有效,后面紧跟的“!important”是Firefox专用的一个标记,带有这个标记的设置具有最高优先 级,之后的设置都无效。所以第三行的height:30px对Firefox无效了;同时,由于IE无法识别min-height和“! important”,所以只有第三行有效,由于IE默认就是高度自适应的,所以即使设置了30px的高度,只要内容很多,也会自动撑开,不需要设置 height:auto。最后,上述代码产生如下效果:

对于Firefox,等同于:

复制代码
代码如下:

.div_class{
min-height:30px;
height:auto;
}

对于IE,等同于:

复制代码
代码如下:

.div_class{
height:30px;
}

“!important” 是个非常好用的东西,如果你写过几个月的跨浏览器的CSS代码,就很容易被Firefox和IE之间的差别而感到恼火。比如padding属性就是一个例子。

假设这样一个层:

复制代码
代码如下:

.div_name {
width:100px;
padding:10px;
}

在IE里面,层的宽度是100px,四周的余空为10px;但是对于Firefox,层的宽度变成了100px+10px+10px=120px,对于宽度敏感的设计来说,整个就混乱了。怎么办呢?还是求助于“!important”吧。只要这样写就可以了:

复制代码
代码如下:

.div_name {
width:80px !important;
width:100px;
padding:10px;
}

因为80+10+10=100。正好让宽度 变成100px。

有时候,我们给一个层加上边框 ,在Firefox里面也会出现宽度增加的情况,比如:

复制代码
代码如下:

.div_name {
width:100px;
padding:10px;
border:2px solid #ccc;
}

上面这个层,在Firefox里面的实际宽度等于100+10+10+2+2=124px,因为边框也会增加宽度。怎么办呢,还是靠“!important”,这样写就可以了:

复制代码
代码如下:

.div_name {
width:76px !important;
width:100px;
padding:10px;
border:2px solid #ccc;
}
更多精彩内容其他人还在看

CSS3实现背景透明文字不透明的示例代码

这篇文章主要介绍了CSS3实现背景透明文字不透明的示例代码的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

浅谈CSS中的尺寸单位

这篇文章主要介绍了浅谈CSS中的尺寸单位的相关资料,浏览器的兼容性越来越好,移动端基本是清一色的webkit,经常会用到css的不同尺寸/长度单位,这里做个整理。感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

CSS中有些属性的前面会加上“*”或“_”所代表的意思

这篇文章主要介绍了CSS中有些属性的前面会加上“*”或“_”所代表的意思,需要的朋友可以参考下
收藏 0 赞 0 分享

CSS 设置滚动条样式的实例代码

这篇文章主要介绍了CSS 设置滚动条样式的实例代码,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧
收藏 0 赞 0 分享

纯CSS制作各种各样的网页图标(三角形、暂停按钮、下载箭头、加号等)

这篇文章主要介绍了纯CSS制作各种各样的网页图标(三角形、暂停按钮、下载箭头、加号等)的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

纯css实现多级折叠菜单折叠树效果

这篇文章主要介绍了纯css实现多级折叠菜单折叠树效果,运用checkbox的checked值来判断下级栏目是否展开,通过css3选择器提供的checked伪类来实现此效果,感兴趣的朋友参考下吧
收藏 0 赞 0 分享

CSS Grid 网格布局全解析

这篇文章主要介绍了CSS Grid 网格布局全解析的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

css flex 弹性布局详解

这篇文章主要介绍了css flex 弹性布局详解的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

CSS3 二级导航菜单的制作的示例

这篇文章主要介绍了CSS3 二级导航的制作的示例的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

使用css禁用input、checkbox、select等html控件实现disable效果

这篇文章主要介绍了使用css禁用input、checkbox、select等html控件实现disable效果,需要的朋友可以参考下
收藏 0 赞 0 分享
查看更多