当前位置:首页 >> 高中作文 >> 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 盒模型组成 1)文档类型 当我们用 dreamweaver 新建一下 html 格式文档时,查看源代码,会发现代码最上 部有如下这句话: <!DOCTYPE html PUBLIC "-//W3C/...

CSS 中 # 和 . 的区别

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

HTML+CSS知识汇总

HTML+CSS 1 如何创建一个网页文件 1.1 网页文件的创建 1.2 新建一个文本文件,将其命名为 xxx.html 或者 xxx.htm(注意后缀名问题) 简单的 html 页面的编写...

CSS入门教程

比如像这样: 例子 body {background-color: #FF0000;} {background 这个页面是红色的 方法 3:外部样式表(引用一个样式表文件) :外部样式表(引用一个...

HTML5+CSS3的定义(百度百科)

HTML5+CSS3的定义(百度百科)_计算机软件及应用_IT/计算机_专业资料。HTML 超文本标记语言,即 HTML(Hypertext Markup Language ),是用于描述网页 文档的一种标记语...

css标签大全

(裁切) css 属性代码大全 一 CSS 文字属性: color : #999999; /*文字颜色*/ font-family : 宋体,sans-serif; /*文字字体*/ font-size : 9pt; /*文字...

CSS样式表总结

CSS样式表总结_计算机软件及应用_IT/计算机_专业资料。CSS 样式表 总结 简单 经典 精髓 1 2 3 4 5 6 7 8 css 样式表总结 CSS: Cascading Style Sheet,...

CSS2.0中文手册

CSS2.0中文手册_计算机软件及应用_IT/计算机_专业资料。非常好的CSS学习教程CSS2.0 中文手册 Introduction To CSS2 样式表简介说明: 本手册针对的是已有一定网页设计...

css中的nav什么意思

css中的nav什么意思_其它课程_高中教育_教育专区。css 中的 nav 什么意思 2010-04-16 07:07 匿名 | 分类:Html/Css | 浏览 3911 次 css 中的 nav 什么...

CSS标签大全 div css

CSS标签大全 div css_IT/计算机_专业资料。应用CSS标签 CSS 网页样式大全 字体属性:(font) 大小 font-size: x-large;(特大) xx-small;(极小) 一般中文用不...
更多相关标签:
css教程 | css3 | css是什么 | css选择器 | cs起源 | css样式 | css 居中 | css3 动画 |
网站地图

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