css中important的用处
今天看代码时遇到一段不理解的地方。
#note_content {
line-height: 22px;
border: #DEDEDE 1px solid;
background: #FAFAFA;
padding: 10px;
word-break: break-all;
word-wrap: break-word;
margin: 40px 0 10px 0;
min-height: 360px;
height: auto !important;
height: 360px;
}
不太理解后三行代码含义。
现在记录一下,方便以后查看:!important是Firefox专用的一个标记。
这段代码的含义是同时兼容firefox和IE的最低高度360排序,和高度自适应。
第一行设置 min-height:360px;对Firefox有效;第二行height:auto !important;也对Firefox有效。后面紧跟的“!important”是Firefox专用的一个标记,带有这个标记的设置具有最高优先 级,之后的设置都无效。所以第三行的height:360px对Firefox无效了;
同时,由于IE无法识别min-height和“! important”,所以只有第三行有效,由于IE默认就是高度自适应的,所以即使设置了360px的高度,只要内容很多,也会自动撑开,不需要设置 height:auto。
挺神奇的。
css中important的用处的更多相关文章
- css中!important的优先级问题
css中!important的优先级在主页面中写>在外部引用的css文件 之前我一直以为css的样式不管写在哪里只要加上!important那么它的优先级就是最高的,事实上并不是这样的,尤其在动 ...
- css 中 important 的用法
css 中 important 的如何使用? important对 一个良好(或者是标准)的浏览器来说,不仅仅是从顺序上提升代码的优先级,还可以用来提升class的优先级(比如firefox), ...
- CSS中"!important"的使用
本篇文章使用最新的IE10以及firefox与chrome测试(截止2013年5月27日22:23:22) CSS的原理: 我们知道,CSS写在不同的地方有不同的优先级, .css文件中的定义 < ...
- CSS中!important的作用
提升指定样式规则的应用优先权. IE6及以下浏览器有个比较显式的支持问题存在,!important在同一条规则集里不生效.请看下述代码: 示例代码: div { color: #f00 !import ...
- CSS中!important的优先级
本篇文章使用最新的IE10以及firefox与chrome测试(截止2013年5月27日22:23:22) CSS的原理: 我们知道,CSS写在不同的地方有不同的优先级, .css文件中的定义 < ...
- CSS中!important的使用 转
本篇文章使用最新的IE10以及firefox与chrome测试(截止2013年5月27日22::) CSS的原理: 我们知道,CSS写在不同的地方有不同的优先级, .css文件中的定义 < 元素 ...
- Css中!important的用法
!important为开发者提供了一个增加样式权重的方法.应当注意的是!important是对整条样式的声明,包括这个样式的属性和属性值 <!DOCTYPE HTML> <html& ...
- 转:css中!important的作用
转:http://www.cnblogs.com/guoguo-15/archive/2011/08/24/2151859.html {*rule !important}这个css规则当今在网页制作的 ...
- css中!important的用法总结
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- Android网络访问库 - Retrofit学习(1)基础
Retrofit是什么 Retrofit是一个类型安全的HTTP客户端,支持Android和Java.它是Square公司开源的项目,当前版本2.0. 在实际开发中,我们Retrofit配合OKHTT ...
- server 2012 IIS 启用.NET 4.5
server2012 自带.NET 4.5 不过IIS服务器只有2.0 和 4.0 所以我们需要手动配置 1.服务器-添加角色和功能 2.依次下一步,选择到服务器角色 -点开web服务器(IIS)-应 ...
- 初探Stage3D(二) 了解AGAL
关于本文 本文并无打算事无巨细的介绍一遍AGAL,仅仅是对现有文档的一些理解及汇总,所以请先阅读相参考文档 AGAL概念 参考资料 http://www.adobe.com/devnet/flashp ...
- jQuery+Superfish制作下拉菜单
superfish制作下拉菜单真的很方便而好很好用,而且还可以通过Superfish提供的参数来控制下拉菜单的不同效果,而且他没有层级限制,换句话说可以通过Superfish来写你想要的层级菜单. 官 ...
- WCF配置工具及服务调试工具
配置工具 C:\Program Files\Microsoft SDKs\Windows\v7.0A\bin\SvcConfigEditor.exe WCF调试客户端工具 C:\Program F ...
- eclipse开发web应用程序步骤(图解)
*运行环境(也就是服务器的选择) 环境搭建好之后开始编写web程序!然后右键->Run as -> Run on Server!
- 编写高质量JS代码的68个有效方法(四)
[20141129]编写高质量JS代码的68个有效方法(四) *:first-child { margin-top: 0 !important; } body>*:last-child { ma ...
- UBUNTU上的GIT SERVER
Git是一个开源的版本控制系统,由Linus Torvalds主导,用于支持Linux内核开发.每一个Git工作目录,都是一个完整的代码库,包含所有的提交历史.有能力跟踪所有的代码版本,而不会去依赖于 ...
- sql order by 排序多个字段
order by 多个字段,每个字段后面都有排序方式,默认ASC 例如:select table a order by a.time1 ,a.time2 desc,a.time3 asc
- 『摄影欣赏』16幅 Romantic 风格照片欣赏【组图】
今天,我们将继续分享人类情感的系列文章.爱是人类最重要的感觉,也可能是各种形式的艺术(电影,音乐,书,画等)最常表达的主题 .这里有40个最美丽的爱的照片,将激励和给你一个全新的视觉角度为这种情绪.我 ...