居然有!important 不好使的情况

  有不少的文章都说没有什么必要的话,尽可能的不要使用!important。但在实际开发的时候,总有那么一两处匹配了好几个规则,这时候使用!important 相对于分析已匹配规则的优先级来说,无疑是剩下了宝贵的时间。然而,常在河边走,哪有不是鞋。终于,在前几天的时候遇到了连!important 都不管用的情况了。

  事情起因是我同事发现safari 下某个组件显示有问题「多了边框」,正常来说边框这种样式不会存在浏览器兼容问题的,但我还是能在safari 上复现了>_<。接下来诡异的事情发生了,我尝试将显示错误的组件元素样式直接设置成无边框(border: 0);然而并没有效果,好吧,那我加上!important;诡异的事情出现了,它的边框还是安静的显示在那里。那时候,我还以为写错样式了,但换成border: none 之后也还是不行。之后,我同事告诉我将那个问题元素的type 从search 改成text 就显示正常了;不然的话,我一度以为这是一个safari 的bug。后面经过一番搜索,终于在css-trick找到了。

  原来上面的显示问题,是不同浏览器引擎之间的处理差异所造成的。在大多数浏览器下,type 为search 的input 和普通的input 别无二致;但是,使用WebKit 的浏览器会对它在样式上做特殊处理「具体表现为:有边框和圆角」。看到这里,你应该已经猜到;这些特殊处理你并不能覆盖掉,即使你使用了!important

input[type=search] {     
    padding: 30px;            /* 被覆盖成 padding: 1px; */
    font-family: Georgia;     /* 被覆盖成 font: -webkit-small-control; */
    border: 5px solid black;  /* 被覆盖成 border: 2px inset; */
    background: red;          /* 被覆盖成 background-color: white; */
    line-height: 3;           /* Irrelevant, I guess */
}

  在上面提到的文章里面,已经有人总结了哪些样式可以覆盖了。当然啦,为了保持大部分乃至所有浏览器的一致性;如果没有什么特殊需求的话,还是尽量不要使用search 类型。

input[type=search] { 
    color: red;  
    text-align: right;
    cursor: pointer;
    display: block; 
    width: 100%; 
    letter-spacing: 4px;        
    text-shadow: 0 0 2px black;       
    word-spacing: 20px;               
}
您的浏览器已过时

要正常浏览本网站请升级您的浏览器。现在升级

×