important的妙用处理firefox和ie的css适配难题

2021-01-20 09:27 jianzhan
针对一些內容可变的层(例如客户评价),大家期待它有个最少的高宽比 (例如30px),这样的话,即便內容仅有1行字,也不容易太不好看;另外又期待在內容较为多的情况下,层的高宽比能全自动撑开,也便是规定height: auto。这时候候便可以设定css的min-height特性。min-height在Firefox里合理,但IE没法鉴别。 可使用下面这个处理计划方案:

拷贝编码
编码以下:

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

第1行设定 min-height:30px;对Firefox合理;第2行height:auto !important;也对Firefox合理,后边紧跟的“!important”是Firefox专用的1个标识,带有这个标识的设定具备最高优先选择 级,以后的设定都失效。因此第3行的height:30px对Firefox失效了;另外,因为IE没法鉴别min-height和“! important”,因此仅有第3行合理,因为IE默认设置便是高宽比自融入的,因此即便设定了30px的高宽比,要是內容许多,也会全自动撑开,不必须设定 height:auto。最终,上述编码造成以下实际效果:

针对Firefox,等同于于:

拷贝编码
编码以下:

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

针对IE,等同于于:

拷贝编码
编码以下:

.div_class{
height:30px;
}

“!important” 是个十分功能强大的物品,假如你写过几个月的跨访问器的CSS编码,就很非常容易被Firefox和IE之间的区别而觉得恼火。例如padding特性便是1个事例。

假定这样1个层:

拷贝编码
编码以下:

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

在IE里边,层的宽度是100px,4周的余空为10px;可是针对Firefox,层的宽度变为了100px+10px+10px=120px,针对宽度比较敏感的设计方案来讲,全部就错乱了。如何办呢?還是求助于“!important”吧。要是这样写便可以了:

拷贝编码
编码以下:

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

由于80+10+10=100。恰好让宽度 变为100px。

有时,大家给1个层再加边框 ,在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;
}