CSS中的!important属性用法

 由于IE并不严格执行W3C标准, 而又几乎垄断了浏览器市场。 所以作为一名合格的网站制作人员, 必须要针对不同的浏览器进行微调。 实现不同浏览器之间兼容的方法有很多, 比如利用JS探测用户的浏览器类型,从而调用不同的样式表。 或者就是利用!important 属性来实现微调的效果。 

 

下面是一段普通的 DIV 代码:

<div id="a"></div>

下面是有关层A在CSS样式表中的定义, 注意,这里使用了!important这个属性。

#a{margin-left:30px!important; margin-left:20px;}

在上面的例子中, 层a 在IE浏览器中, 左边距为20像素, 而在Firefox中, 左边距则变为30像素。 这是因为, !important在 CSS 中表示优先调用, 由于IE不能够识别这个属性, 所以在IE中, 只能够调用 “margin-left:20px;" 这个选项, 所以同样的一段代码, 在Firefox和IE中就会显示不同的样式。

不过值得注意的是, 最新版的IE 7.0 已经可以识别 !important, 这个属性了, 但是IE 6.0仍然不能识别。 所以这个小技巧还是相当有用的.

 

可使用如下代码检测当前IE浏览器的版本(注意:在非IE浏览器中是看不到效果的),此方法用于IE5及以上版本。 

HTML 的注释格式是 <!-- Comment content --> , IE 对HTML注释做了一些扩展,使之可以支持条件判断表达式: 
<!--[if expression]> HTML <![endif]--> 当表达式expression 为True 的时候,显示 HTML 内容。 

 


<!--[if IE]> You are using Internet Explorer. <![endif]-->
<!--[if IE 7]> Welcome to Internet Explorer 7! <![endif]-->
<!--[if !(IE 7)]> You are not using version 7. <![endif]-->
<!--[if gte IE 7]> You are using IE 7 or greater. <![endif]-->
<!--[if (IE 5)]> You are using IE 5 (any version). <![endif]-->
<!--[if (gte IE 5.5)&(lt IE 7)]> You are using IE 5.5 or IE 6. <![endif]-->
<!--[if lt IE 5.5]> Please upgrade your version of Internet Explorer. <![endif]-->

 

(2)应该如何应用条件注释 

 

因为IE各版本的浏览器对我们制作的WEB标准的页面解释不一样,具体就是对CSS的解释不同,我们为了兼容这些,可运用条件注释来各自定义,最终达到兼容的目的。 

 

比如: < !–- 默认先调用css.css样式表 –-> 

<link rel="stylesheet" type="text/css" href="css.css" />< !-–[if IE 7]> 

<!–- 如果IE浏览器版是7,调用ie7.css样式表- –> 

<link rel="stylesheet" type="text/css" href="ie7.css" />< ![endif]–-> 

<!–-[if lte IE 6]> 

<!–- 如果IE浏览器版本小于等于6,调用ie.css样式表 -–> 

<link rel="stylesheet" type="text/css" href="ie.css" />< ![endif]–> 这其中就区分了IE7和IE6向下的浏览器对CSS的执行,达到兼容的目的。同时,首行默认的css.css还能与其他非IE浏览器实现兼容。 

注意:默认的CSS样式应该位于HTML文档的首行,进行条件注释判断的所有内容必须位于该默认样式之后。 比如如下代码,在IE浏览器下执行显示为红色,而在非IE浏览器下显示为黑色。如果把条件注释判断放在首行,则不能实现。该例题很能说明网页对IE浏览器和非IE浏览器间的兼容性问题解决。 <style type="text/css"> body{ } < /style> < !-–[if IE]> 

<style type="text/css">body{}< /style>< ![endif]–-> 

同时,有人会试图使用<!–-[if !IE]>来定义非IE浏览器下的状况,但注意:条件注释只有在IE浏览器下才能执行,这个代码在非IE浏览下非单不是执行该条件下的定义,而是当做注释视而不见。 

正常就是默认的样式,对IE浏览器需要特殊处理的,才进行条件注释。在HTML文件里,而不能在CSS文件中使用。 

现在的DWcs4里面,已经装备了这些注释:在“窗口-->代码片段-->注释”里。其他的版本没太注意到。 

 

 

 

 

 

转载于:https://www.cnblogs.com/zhaoleigege/p/4797387.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/296448.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

java中equals和==的区别

值类型是存储在内存中的堆栈&#xff08;以后简称栈&#xff09;&#xff0c;而引用类型的变量在栈中仅仅是存储引用类型变量的地址&#xff0c;而其本身则存储在堆中。操作比较的是两个变量的值是否相等&#xff0c;对于引用型变量表示的是两个变量在堆中存储的地址是否相同&a…

数学课本上的几大变态之处

全世界只有3.14 % 的人关注了爆炸吧知识数学课本上的几大变态--完--

使用Redis set 解决数据的唯一性问题

前言最近遇到一个问题&#xff0c;就是接收第三方数据的时候&#xff0c;类似这种直播数据&#xff0c;由于业务的缘故&#xff0c;导致对方给的数据每次都是全量的&#xff0c;而且请求很频繁&#xff0c;有时候一秒好几十次。直播数据一般都是刷刷刷的&#xff0c;这个大家或…

mysql集群从节点无法启动_一次galera cluster集群故障节点无法启动问题排查

现象环境&#xff1a;Server version: 10.0.25-MariaDB-wsrep MariaDB Server, wsrep_25.13.raf7f02e配置文件&#xff1a;[rootnode-23 mariadb]# more /etc/my.cnf[mysqld]server_id3bind_address node-23port 3306datadir/var/lib/mysqllog-error/var/log/mariadb/mariadb…

DbVisualizer 8 解决中文乱码问题

DbVisualizer 8 解决中文乱码问题 原文http://blog.chinaunix.net/uid-26640696-id-3128544.html 在SQL Commander中&#xff0c;sql语句中如果有中文&#xff0c;显示是‘口口口’。解决办法如下&#xff1a; 在Tools->tool Properties->General->Appearance->Fon…

webform 页面传值的方法总结

ASP.NET页面之间传递值的几种方式 页面传值是学习asp.net初期都会面临的一个问题&#xff0c;总的来说有页面传值、存储对象传值、ajax、类、model、表单等。但是一般来说&#xff0c;常用的较简单有QueryString&#xff0c;Session&#xff0c;Cookies&#xff0c;Application…

【转】Android编程点滴(14) -- Android中资源文件夹res/raw和assets的使用

*res/raw和assets的相同点&#xff1a; 1.两者目录下的文件在打包后会原封不动的保存在apk包中&#xff0c;不会被编译成二进制。 *res/raw和assets的不同点&#xff1a;1.res/raw中的文件会被映射到R.java文件中&#xff0c;访问的时候直接使用资源ID即R.id.filename&#xff…

iNeuOS工业互联网操作系统,智慧用电测控应用案例

目 录1. 概述... 22. 系统部署结构... 23. 用电测控终端... 34. 系统应用介绍... 61. 概述通过物联网技术对引发电气火灾的主要因素(导线温度、电流和漏电流等)进行不间断的数据跟踪与统计分析&#xff0c;实时发现电气线路和用电设备存在的安全隐…

mysql 修改库的校对集_mysql数据库的基本操作(增删改查、字符集、校对集)

MySQL数据库概述MySQL数据库是经典的关系型数据库管理系统&#xff0c;MySQL 是最流行的关系型数据库管理系统之一&#xff0c;在 WEB 应用方面&#xff0c;MySQL是最好的 RDBMS (Relational Database Management System&#xff0c;关系数据库管理系统) 应用软件。MySQL是一款…

出现了!豆瓣最高9.9分,2020年最值得看的美剧!你居然还没看过?【内附资源】...

全世界只有3.14 % 的人关注了爆炸吧知识在调性普遍黄暴烧脑的美剧大流中&#xff0c;《This is us》没有大牌主演&#xff0c;没有炫酷特效&#xff0c;却让观众集体沦陷&#xff0c;被称为5年难得一见的美剧。有人说&#xff0c;这是「有生之年看过的最温柔的美剧」。但它取得…

静态注册BroadcastReceiver内部类

先看代码&#xff1a; [java] view plaincopy public class ZonePicker { public static class SetDefaultTimeZone extends BroadcastReceiver{ Override public void onReceive(Context context, Intent intent) { // TODO Auto-gener…

Excel VBA - Workbook对象

来源&#xff1a;http://blog.csdn.net/alexbnlee/article/details/6911204 Workbooks(1).Name Workbooks(1).FullName 工作簿地址加名字 Workbooks(1).Path 工作簿地址 Workbooks(1).Close SaveChanges:False 关闭工作簿&#xff0c;并且不保存 Workbooks.Open ThisW…

C# 修改配置文件进行窗体logo切换

01—前言&#xff1a;题外的话大家可能发现这个号现在原创越来越少了&#xff0c;其实小编并没有放弃持续更新&#xff0c;只是把一手原创放到了 【dotnet编程大全】这个号了&#xff0c;那个号目前原创主要更新的是wpf mvvm方面的知识&#xff0c;框架用的Caliburn.Micro&…

数学有趣地超乎你的想象

全世界只有3.14 % 的人关注了爆炸吧知识说起数学你是拒绝还是喜欢看完这一组&#xff0c;对于数学他的震撼、霸气、美来感受下哇1三角形内角和为1802多边形外角和为360&#xff08;图来源于可乐学习&#xff09;3怎样将一个正三角形剪拼成正方形&#xff1f;4怎样把两正方形剪拼…

bitset 运算

C提供bits类&#xff0c;支持位向量的操作。 引入头文件bitset &#xff1a; #include <bitset> 定义bitset变量 bitset<位向量长度><变量名>&#xff1b; 默认变量所有位都被初始化为0 有两种初始化方式 用一个无符号整数作参数&#xff0c;bitset前N位将被…

phpcms2008常用函数

{$head[title]} 页面标题&#xff0c;用法&#xff1a; <title>{$head[title]}-{$PHPCMS[sitename]}</title> {$PHPCMS[sitename]} 网站名称 用法&#xff1a;<title>{$head[title]}-{$PHPCMS[sitename]}</title> {$head[keywords]} 关键字 用法&#…

“”和“” java

“>>”算术右移运算符, 表示带符号右移&#xff0c;它使用最高位填充移位后左侧的空位。右移的结果为&#xff1a;每移一位&#xff0c;第一个操作数被2除一次&#xff0c;移动的次数由第二个操作数确定。按二进制形式把所有的数字向右移动对应巍峨位数&#xff0c;低位移…

使用C#像google/zx一样编写脚本

google/zxzx是谷歌开源的一个能够帮助开发者快速编写脚本的工具&#xff0c;它使用JavaScript作为编程语言。示例脚本如下&#xff1a;#!/usr/bin/env zxawait $cat package.json | grep namelet branch await $git branch --show-current await $dep deploy --branch${branch…

redis 查询缓存_Redis缓存总结:淘汰机制、缓存雪崩、数据不一致....

在实际的工作项目中&#xff0c; 缓存成为高并发、高性能架构的关键组件 &#xff0c;那么Redis为什么可以作为缓存使用呢&#xff1f;首先可以作为缓存的两个主要特征&#xff1a;在分层系统中处于内存/CPU具有访问性能良好&#xff0c;缓存数据饱和&#xff0c;有良好的数据淘…

5部适合学英语的动画电影,快和孩子一起看!

全世界只有3.14 % 的人关注了爆炸吧知识今天我们与大家分享5部非常适合小学生学习英语的动画电影&#xff0c;家长们可依据不同类别和主题为孩子挑选喜欢的影片&#xff0c;在家陪孩子一起观看。文末可免费领取哦~01 《丁丁历险记》讲述的是一天丁丁买了一只古老的船模送给船长…