今天看代码时遇到一段不理解的地方。

#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的用处的更多相关文章

  1. css中!important的优先级问题

    css中!important的优先级在主页面中写>在外部引用的css文件 之前我一直以为css的样式不管写在哪里只要加上!important那么它的优先级就是最高的,事实上并不是这样的,尤其在动 ...

  2. css 中 important 的用法

      css 中 important 的如何使用?  important对 一个良好(或者是标准)的浏览器来说,不仅仅是从顺序上提升代码的优先级,还可以用来提升class的优先级(比如firefox), ...

  3. CSS中"!important"的使用

    本篇文章使用最新的IE10以及firefox与chrome测试(截止2013年5月27日22:23:22) CSS的原理: 我们知道,CSS写在不同的地方有不同的优先级, .css文件中的定义 < ...

  4. CSS中!important的作用

    提升指定样式规则的应用优先权. IE6及以下浏览器有个比较显式的支持问题存在,!important在同一条规则集里不生效.请看下述代码: 示例代码: div { color: #f00 !import ...

  5. CSS中!important的优先级

    本篇文章使用最新的IE10以及firefox与chrome测试(截止2013年5月27日22:23:22) CSS的原理: 我们知道,CSS写在不同的地方有不同的优先级, .css文件中的定义 < ...

  6. CSS中!important的使用 转

    本篇文章使用最新的IE10以及firefox与chrome测试(截止2013年5月27日22::) CSS的原理: 我们知道,CSS写在不同的地方有不同的优先级, .css文件中的定义 < 元素 ...

  7. Css中!important的用法

    !important为开发者提供了一个增加样式权重的方法.应当注意的是!important是对整条样式的声明,包括这个样式的属性和属性值 <!DOCTYPE HTML> <html& ...

  8. 转:css中!important的作用

    转:http://www.cnblogs.com/guoguo-15/archive/2011/08/24/2151859.html {*rule !important}这个css规则当今在网页制作的 ...

  9. css中!important的用法总结

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. Android网络访问库 - Retrofit学习(1)基础

    Retrofit是什么 Retrofit是一个类型安全的HTTP客户端,支持Android和Java.它是Square公司开源的项目,当前版本2.0. 在实际开发中,我们Retrofit配合OKHTT ...

  2. server 2012 IIS 启用.NET 4.5

    server2012 自带.NET 4.5 不过IIS服务器只有2.0 和 4.0 所以我们需要手动配置 1.服务器-添加角色和功能 2.依次下一步,选择到服务器角色 -点开web服务器(IIS)-应 ...

  3. 初探Stage3D(二) 了解AGAL

    关于本文 本文并无打算事无巨细的介绍一遍AGAL,仅仅是对现有文档的一些理解及汇总,所以请先阅读相参考文档 AGAL概念 参考资料 http://www.adobe.com/devnet/flashp ...

  4. jQuery+Superfish制作下拉菜单

    superfish制作下拉菜单真的很方便而好很好用,而且还可以通过Superfish提供的参数来控制下拉菜单的不同效果,而且他没有层级限制,换句话说可以通过Superfish来写你想要的层级菜单. 官 ...

  5. WCF配置工具及服务调试工具

      配置工具 C:\Program Files\Microsoft SDKs\Windows\v7.0A\bin\SvcConfigEditor.exe WCF调试客户端工具 C:\Program F ...

  6. eclipse开发web应用程序步骤(图解)

    *运行环境(也就是服务器的选择) 环境搭建好之后开始编写web程序!然后右键->Run as -> Run on Server!

  7. 编写高质量JS代码的68个有效方法(四)

    [20141129]编写高质量JS代码的68个有效方法(四) *:first-child { margin-top: 0 !important; } body>*:last-child { ma ...

  8. UBUNTU上的GIT SERVER

    Git是一个开源的版本控制系统,由Linus Torvalds主导,用于支持Linux内核开发.每一个Git工作目录,都是一个完整的代码库,包含所有的提交历史.有能力跟踪所有的代码版本,而不会去依赖于 ...

  9. sql order by 排序多个字段

    order by 多个字段,每个字段后面都有排序方式,默认ASC 例如:select table a order by a.time1 ,a.time2 desc,a.time3 asc

  10. 『摄影欣赏』16幅 Romantic 风格照片欣赏【组图】

    今天,我们将继续分享人类情感的系列文章.爱是人类最重要的感觉,也可能是各种形式的艺术(电影,音乐,书,画等)最常表达的主题 .这里有40个最美丽的爱的照片,将激励和给你一个全新的视觉角度为这种情绪.我 ...