css中important的用处

时间:2024-11-10 23:37:20

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

#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。

挺神奇的。