!important是CSS1就定义的语法,作用是提高指定样式规则的应用优先权,语法格式{ sRule!important },即写在定义的最后面,并且在分号之前,比如:

{font-color: red !important;}

由于IE并不支持该语法,所以我们可以利用这一点解决部分CSS的浏览器兼容问题。

在页面设计中,需要将布局定义相关部分改为:{margin-right: -2px !important   margin-right: 0px;},这样Firefox仍然使用前一部分的margin定义,而IE则使用后一部分margin定义,立即试用,果然在IE下浏览正常了。

总结
由于css是采用越接近越优先的原则,同一个定义,比如{margin: 2px;margin: 0px;},在IE和firefox中就会解释成{margin: 0px;};而使用了!important之后,!important对firefox有效,对IE无效,故{margin: 2px !important;   margin: 0px;},在firefox中解释为{margin:2px;},在IE中解释为{margin:2px;}

!important用来让firefox支持前面的定义,忽略后面的定义

!important对IE无效,IE依然会采用后面的定义,即后面的定义有效,前面的无效。

css !import的更多相关文章

  1. 20190422-外部导入CSS样式之link、CSS@import、Sass分音

    写在前面乱七八糟的前言:今天wuliMR黄问了一个问题,Sass的分音与link标签都是导入外部样式的,有什么不同,这真是个好问题,因为本白着实没想过,也不知道,不过没关系,成功的背后总有一个默默无闻 ...

  2. css @import 导入文件

    导入另一个css文件 例如 <style type="text/css"> @import url(css/main.css); //导入css目录下的main.css ...

  3. css和@import区别用法

    css和@import都是调用外部样式表的方法. 一.用法 (1)link: <link rel="stylesheet" type="text/css" ...

  4. 添加css的方式:link与@import区别

    如何在html中添加css? 在html中设置css共有三种方式,分别是: 行内式 内嵌式 导入式-link 导入式-@import 1.行内式.即在html标签中的style属性中设置css,值得注 ...

  5. css的两种引用方式 link和@import

    学习web开发的最大乐趣就是不断的发现自己以前不曾见过的东西,这些东西对于我来说是那么的新鲜有趣. 比如说今天偶尔研究别人的网站,就发现了有趣的东东. 当点开此网页的css时(这个css文件命名方式就 ...

  6. 调用css时,用link 和 @import url 有什么区别

    加载css link与@import的区别: 其实 link 与 @import 在显示效果上还是有很大区别的,基本上来看 link 的加在会在页面显示之前全部加在完全,而 @import 会是读取完 ...

  7. css link和@import区别

    1.link语法结构 <link href="CSSurl路径" rel="stylesheet" type="text/css" / ...

  8. css link和@import区别用法

    这里link与@import介绍的是html引入css的语法单词.两者均是引入css到html的单词. 1.link语法结构<link rel="stylesheet" ty ...

  9. CSS中link和@import的区别是:

    Link属于html标签,而@import是CSS中提供的 在页面加载的时候,link会同时被加载,而@import引用的CSS会在页面加载完成后才会加载引用的CSS @import只有在ie5以上才 ...

随机推荐

  1. 史上最牛逼的纯CSS实现tab选项卡,闪瞎你的狗眼

    下载地址:http://download.csdn.net/detail/cometwo/9393614 html文件 <!DOCTYPE html> <html> <h ...

  2. ant design pro 初识

    发送请求 上次讲到在api.js中发送请求,模拟了假数据,这次讲一下调用真实接口进行请求并渲染页面. 先完整的过一遍请求吧 首先view层发送请求例如下面的代码: componentDidMount( ...

  3. {...formItemLayout} 标签布局

    {...formItemLayout}是reactjs中属性的写法{...props},formItemLayout标签布局,wrapperCol需要为输入控件设置布局样式时,和label 标签布局, ...

  4. Odoo,OpenERP widget标签

    Odoo,OpenERP widget标签 widget="statusbar" 头部状态条标签 widget="email"  电子邮件地址标签 widget ...

  5. Docker exec与Docker attach

    转载博客地址:http://blog.csdn.net/halcyonbaby 新浪微博:@寻觅神迹 内容系本人学习.研究和总结,如有雷同,实属荣幸! ================== Docke ...

  6. Git 工作区、暂存区和版本库

    基本概念 我们等来理解下Git工作区.暂存区和版本库概念 工作区:就是你在电脑里能看到的目录 强烈推荐git新手阅读 暂存区:英文叫stage,或index.一般存放在igt 目录下的index文件( ...

  7. php中的重载以及几个常用的魔术方法示例

    在面向对象语言中,有一个很重要的概念——overload,即重载.所谓重载,一般是用于在一个类内实现若干重载的方法,这些方法的名称相同而参数形式不同.但是,在php中,这个概念跟大多面向对象语言中的“ ...

  8. 【转】火星坐标、百度坐标、WGS-84坐标相互转换及墨卡托投影坐标转经纬度JavaScript版

    原文地址:https://www.cnblogs.com/fwc1994/p/5884115.html 火星坐标 火星坐标是国家测绘局为了国家安全在原始坐标的基础上进行偏移得到的坐标,基本国内的电子地 ...

  9. c语言中有bool型变量吗?

    C语言里面是没有bool(布尔)类型的,C++里面才有,这就是说,在C++里面使用bool类型是没有问题的. bool类型有只有两个值:true =1 .false=0. 但是,C99标准里面,又定义 ...

  10. atom执行num run dev报错

    # atom运行npm run dev报错问题 运行描述 vue项目,直接在终端中运行 npm run dev 可以成功执行.但是在atom安装的platformio-ide-terminal插件中打 ...