当前位置:首页 >> 高中作文 >> css

css


一,由于不同的浏览器,比如 Internet Explorer 6,Internet Explorer 7,Mozilla Firefox 等,对 CSS 的解析认识不一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。 这个时候我们就需要针对不同的浏览器去写不同的 CSS,让它能够同时兼容不同的浏览器, 能在不同的浏览器中也能得到我们想要的页面效果。 这个针对不同的浏览器写不同的 CSS code 的过程,就叫 CSS hack,也叫写 CSS hack。 CSS Hack 的原理是什么 由于不同的浏览器对 CSS 的支持及解析结果不一样,还由于 CSS 中的优先级的关系。我们 就可以根据这个来针对不同的浏览器来写不同的 CSS。 比如 IE6 能识别下划线"_"和星号" * ",IE7 能识别星号" * ",当不能识别下划线"_",而 firefox 两个都不能认识。等等 书写顺序,一般是将识别能力强的浏览器的 CSS 写在后面。下面如何写里面说得更详细些。 如何写 CSS Hack 比如要分辨 IE6 和 firefox 两种浏览器,可以这样写: <style> div{ background:green; /* for firefox */ *background:red; /* for IE6 */ } </style> 我在 IE6 中看到是红色的,在 firefox 中看到是绿色的。 解释一下: 上面的 css 在 firefox 中,它是认识不了后面的那个带星号的东东是什么的,于是将它过滤掉, 不予理睬,解析得到的结果是:div{background:green},于是理所当然这个 div 的背景是绿色的。 在 IE6 中呢,它两个 background 都能识别出来,它解析得到的结果 是:div{background:green;background:red;},于是根据优先级别,处在后面的 red 的优先级高,于 是当然这个 div 的背景颜色就是红色的了。 CSS hack:区分 IE6,IE7,firefox 区别不同浏览器,CSS hack 写法: 区别 IE6 与 FF: background:orange;*background:blue; 区别 IE6 与 IE7: background:green !important;background:blue; 区别 IE7 与 FF: background:orange; *background:green; 区别 FF,IE7,IE6: background:orange;*background:green;_background:blue; background:orange;*background:green !important;*background:blue; 注:IE 都能识别*;标准浏览器(如 FF)不能识别*;

IE6 能识别*,但不能识别 !important, IE7 能识别*,也能识别!important; FF 不能识别*,但能识别!important; IE6 IE7 FF * √ √ √ × √

!important ×

浏览器优先级别:FF<IE7<IE6,CSS hack 书写顺序一般为 FF IE7 IE6 //一句话解决 IE8兼容 <meta http-equiv="X-UA-Compatible" content="IE=5; IE=8" /> background:#ffc; /* 对 firefox 有效*/

*background:#ccc; /* 对 ie7有效 */ _background:#000; /* 只对 ie6有效 */

以 : " #demo {width:100px;} "为例 ; 为例 #demo {width:100px;} /*被 FIREFOX,IE6,IE7 执行 .*/ 被 * html #demo {width:120px;} /*会被 IE6 执行 之前 的定义会被后来的覆盖 所以 会被 执行,之前 的定义会被后来的覆盖,所以 所以#demo 的宽 度在 IE6 就 为 120px; */ *+html #demo {width:130px;} /*会被 IE7 执行 会被 执行*/ --------------所以最后,#demo 的宽 度在三个浏览器的解释为 度在三个浏览器的解释为: 所以最后 FIREFOX:100px; ie6:120px; ie7:130px;、 、

二 , 对于 ul

form 等在浏览器中是有默认属性的 。 IE 中默认的是 margin, 但 是 FIREFOX 中默 , form

认的是 padding。 。 所以在进 行定义的时候 , 为了防止页面结构在不同浏览器中有变化 , ul 对 等进行设置时应该有如下设置 ul, form{ margin: 0; padding: 0; } , : ; : ;

三 , IE 条件注释功能 1, 如果想让 html 页面中的某一块只在 ie 中显示可以 , <!--[ifIE]>只有 IE 能显示此 块 只有 块<![endif]--> 那么里边的内容只有在 IE 浏 览器中才能被显示 , 但是在 FF 或其他浏览器中显示不出来 。 那么<!--[ifIE6.0]>只有 IE6 能显示此块 只有 能显示此块<![endif]--> 那么 2, 从 IE5.0 到 IE7 都能支持 此注释功能 。 并且可精确到小数点后四位 。 如 ,

<!--[ifIE5.1000]>只 有 IE5.1 能显示此块 只 能显示此块<![endif]--> 3, 条件注释前可加 前缀 , 用于判断更高或更低版本 。 如 : , <!--[if gt IE5]>只有 IE5 以 上版本能显示此块 ( 不包括 IE5) <![endif]--> 只有 ) <!--[if gte IE5]>只有 IE5 及 以上版本能显示此块 ( 包括 IE5) <![endif]--> 只有 ) <!--[if lt IE7]>只有 IE7 以下 版本能显示此块 ( 不包括 IE7) <![endif]--> 只有 ) <!--[if lte IE7]>只有 IE7 及 以下版本能显示此块 ( 包括 IE7) <![endif]--> 只有 ) 注意 : 此注释写在 html 文 件中 , 而不是 css 文件中

四,CSS Hack 汇总快查 屏蔽 IE 浏览器(也就是 IE 下不显示) *:lang(zh) select {font:12px 目前此句只为 FF 所识别*/ !important;} /*FF,可见,特别提醒:由于 Opera 最近的升级,

select:empty {font:12px !important;} /*safari 可见*/
这里 select 是选择符,根据情况更换。第二句是 MAC 上 safari 浏览器独有的。 仅 IE7 与 IE5.0 可以识别 *+html 仅 IE7 可以识别 *+html

select {…}

当面临需要只针对 IE7 与 IE5.0 做样式的时候就可以采用这个 HACK。

select {…!important;}

当面临需要只针对 IE7 做样式的时候就可以采用这个 HACK。 IE6 及 IE6 以下识别 * html

select {…}

这个地方要特别注意很多博客都写成了是 IE6 的 HACK 其实 IE5.x 同样可以识别这个 HACK。其它 浏览器不识别。 html/**/ >body 仅 IE6 不识别,屏蔽 IE6

select {…}

这句与上一句的作用相同。

select { display /*屏蔽 IE6*/:none;}
这里主要是通过 CSS 注释分开一个属性与值,注释在冒号前。 仅 IE6 与 IE5 不识别,屏蔽 IE6 与 IE5

select/**/ { display /*IE6,IE5 不识别*/:none;}
这里与上面一句不同的是在选择符与花括号之间多了一个 CSS 注释。不屏蔽 IE5.5 仅 IE5 不识别,屏蔽 IE5

select/*IE5 不识别*/ {…}
这一句是在上一句中去掉了属性区的注释。只有 IE5 不识别,IE5.5 可以识别。 盒模型解决方法

selct {width:IE5.x 宽度; voice-family :"\"}\""; voice-family:inherit; width:正确宽度;}
盒模型的清除方法不是通过!important 来处理的。这点要明确。 清除浮动

select:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
在 Firefox 中,当子级都为浮动时,那么父级的高度就无法完全的包住整个子级,那么这时用这 个清除浮动的 HACK 来对父级做一次定义,那么就可以解决这个问题。 截字省略号

select { -o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrap;
overflow:hidden; } 这个是在越出长度后会自行的截掉多出部分的文字,并以省略号结尾,很好的一个技术。只是目 前 Firefox 并不支持。 只有 Opera 识别 @media all and (min-width: 0px){ select {……} } 针对 Opera 浏览器做单独的设定。 以上都是写 CSS 中的一些 HACK,这些都是用来解决局部的兼容性问题,如果希望把兼容性的内容也分离出 来,不妨试一下下面的几种过滤器。这些过滤器有的是写在 CSS 中通过过滤器导入特别的样式,也有的是 写在 HTML 中的通过条件来链接或是导入需要的补丁样式。 IE5.x 的过滤器,只有 IE5.x 可见 @media tty { i{content:"\";/*" "*/}} @import 'ie5win.css'; /*";} }/* */ IE5/MAC 的过滤器,一般用不着 /*\*//*/ @import "ie5mac.css"; /**/


赞助商链接
更多相关文档:

css练习答案

A、 B、 C、<stylesheet>mystyle.css</stylesheet> B 3 题干 在 HTML 文档中,引用外部样式表的正确位置是? A、文档的末尾 B、文档的顶部 C、 部分 D、 ...

CSS试题

CSS试题_其它_高等教育_教育专区。网页设计与制作课程中的CSS试题 网页设计与制作——(第三部分)css 练习题 CSS 一、单选题 1.CSS 是利用( B )XHTML 标签...

css知识点汇总

CSS 学习知识点 1、css 是什么? CSS(Cascading Style Sheet)可译为“层叠样式表”或“级联样式表” ,它定义如何显示 HTML 元素,用于控制网页的外观。 2、...

DIV+CSS标签说明大全

2. 3. CSS 的内部引用,内部引用在代码很多的时候不便于日后修改 style 标签应该在 head 标签内部 CSS 的外部引用 例如: A.link B.@import) 例如:@import...

华为集群CSS原理

user-interface con 0 user-interface vty 0 4 authentication-mode aaa Return 二、S12800 系列 CSS 堆叠配置组网需求在一个新建的数据中心网络中,要求核心层具有...

CSS规则定义

CSS 规则定义一、类型 Font-family:字体 font-size:字体大小: xx-small x-small small medium large x-large xx-large larger 值 最小 较小 小 正常(默认值...

CSS 中 # 和 . 的区别

CSS 中 # 和 . 的区别 id:用来定义页面中大的样式,如栏目划分,顶部,正文,底部等;用#top 的 形式来定义; class: 用来定义一些比较细节的样式, 如具体的一个...

CSS3 必须要知道的10 个顶级命令

CSS3 必须要知道的 10 个顶级命令 2012-04-23 15:17 by 随风浪迹天涯, 6049 visits, 收藏, 编辑 1.边框圆角(Border Radiuas)这个是我们在平常很常用的吧,...

CSS标签大全 div css

CSS标签大全 div css_IT/计算机_专业资料。应用CSS标签 CSS 网页样式大全 字体属性:(font) 大小 font-size: x-large;(特大) xx-small;(极小) 一般中文用不...

css+div题库

css+div题库_IT认证_资格考试/认证_教育专区。Dreamwear 认证考试真题题库 1. 下列哪种 CSS 样式定义的方式拥有最高的优先级? A) 嵌入 B) 行内 C) 链接 ...

更多相关标签:
网站地图

文档资料共享网 nexoncn.com copyright ©right 2010-2020。
文档资料共享网内容来自网络,如有侵犯请联系客服。email:zhit325@126.com