当前位置:首页 >> 高中作文 >> 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"; /**/


更多相关文档:

div+css教案

合肥经济技术职业学院课程教案课程名称 CSS+DIV 网页样式与布局从入门到精通 课程编号 英文课程名称 CSS+DIV Webpage style and layout from entry to the master ...

CSS 中 # 和 . 的区别

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

CSS样式所有属性

CSS 外边距属性(Margin) margin 在一个声明中设置所有外边距属性。 margin-bottom 设置元素的下外边距。 margin-left 设置元素的左外边距。 margin-right 设置元素...

CSS简单参考答案

css 14页 5财富值如要投诉违规内容,请到百度文库投诉中心;如要提出功能问题或意见建议,请点击此处进行反馈。 CSS简单参考答案 隐藏>> 1 . CSS 指的是? * Comp...

css+div题库

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

CSS论文

CSS论文_工学_高等教育_教育专区。论文题目 CSS s 学院: 班级: 学号: 姓名: 信息工程学院 2小 班 20 目录论文题目 CSS ...论文题目 CSS s 学院: 班级: ...

Html5+css3 Web前端开发规范

Html5+css3 Web前端开发规范_互联网_IT/计算机_专业资料。Html5+css3 Web前端开发规范,让跟多的前端开发者得到帮助!Web 前端开发规范文件规范为输出高质量的 ...

html+css笔试附答案

html+css笔试附答案_从业资格考试_资格考试/认证_教育专区 暂无评价|0人阅读|0次下载|举报文档 html+css笔试附答案_从业资格考试_资格考试/认证_教育专区。里面的...

css知识点汇总

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

CSS规范命名大全

CSS 规范命名大全集合 dadaV20160303 常用名称 头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wrapper ...
更多相关标签:
css教程 | css3 | css是什么 | css选择器 | cs起源 | css样式 | css 居中 | css3 动画 |
网站地图

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