在不同浏览器，标签呈现的效果是有区别的。所以小面小编来谈谈如何让CSS的标签兼容不同的浏览器。作为块级元素的标签，在写CSS文件时， 最好定义行高line-height， 不要定义高度height，因为定义了高度， 就限制了块级元素的高度， 在不同浏览器， 很难实现比较统一的效果，我曾经遇到，在IE6，FIREFOX(FF)效果完好， 而在IE7，标题的文字只出来一半。 且标题在不同的布局中， 会有不同的行数要求， 比如在侧栏等小地方， 标题很可能有2行或3行， 如果高度被定义了， 那么大部分浏览器都会出现错误的显示， 很拥挤或没有显示， 如果设置了底部边线， 还可能错位。所以标签， 最好不要定义高度height，但一定要定义行高line-height，其他数值，根据实际效果适当变化。这样， 对不同浏览器的兼容性是最好的。h3 {font-size:14margin: 15px 0px 10px 0padding: 3px 0px 3px 0line-height:20color:#55295e; text-align:border-bottom: 1px dotted #55295e;}标签一般介绍标签是一个标题标签，常用做网站主题、文章标题或用在段落之前，用于表明整个网站、整篇文章或段落要表达的意思。根据显示和要表达意思的级别可以分为H1，H2，H3，H4，H5，H6。标签成对出现，以开始，以结束。在一个WEB页面中，H1标签最好(理论上是应该)只出现一次，因为它代表该WEB页面的主题。在实际操作中，建议不要使用 h1 来定义文章标题，而是用来定义网站标题。我有一个网站， 在首页一段文字前用了H1，并合理地分布了H2，H3，H4，结果十天以后， 原来排在第一页的关键词， 就掉到了第四页。因此， 用一次H2做页面一级标题，比较安全。H1的重要性最高，常用于表达对整个网站的作用和性质的描述，或表示网站面向的受众群体。其他标签根据级别的不同分别用于显示某个专区的名称，或某段介绍文字的大概描述文章出自，转载请保留此链接！。因它表示对网站或某段文字的大体描述，所以相对于搜索引擎来说H标签具有很高的价值。但这并不意味着可以随意的使用。比如，有些网站为了刻意追求特定关键字的排名，而在一段文字中使用H标签来展示关键字。或干脆把H标签当做一个容器来对网页进行布局。这样完全混淆了H标签的作用，也是不推荐的。标签代表了一个网页的重点层次，但不要过度使用。否则会受到搜索引擎的不同程度的降权。标签的使用和控制，合理安排网页层次h1，h2，h3，是经常用到的标题标志，权重比STONRG高一点。以前我曾在一个网页里多次使用H1，结果很长时间在GG的收录都是补充页面(更新，外连正常)。H标题作为关键词布局的一个重要方面，一定程度上决定了网页的层次结构和轻重布局。很多著名的站点都使用H类标题，用法上略有区别，比较灵活。1、按照内容的重要性来定义：使用 h1 定义网站标题使用 h2 定义文章标题使用 h3 定义栏目标题2、按照网站的层次来定义：使用 h1 定义网站标题使用 h2 定义栏目标题使用 h3 定义文章标题标签CSS样式设置标签默认的表现样子一般不尽如人意， 不能满足网页设计的要求。好在标签是块级元素，适用块级元素的属性，标签均可使用，因此，标签可以通过CSS加以完美控制。内外空白边距，可以通过外边距margin和内边距padding控制h1 {margin:0padding:0}字体的字号，颜色，字体控制h1 {font-size:14 color:#55295e;font-family:Verdana,Arial, Helvetica,sans- }高度和宽度的控制h1 {height:20 width:400line-height:20}行高的控制h1 {line-height:20}文本对齐方式的控制， 可以是left，right，center。h1 {text-align:}边框的控制h1 {border: 1px dotted #55295e;}背景的控制h1 {background: #ccc url(images/test.jpg) no-}最近更新：免责声明：本文仅代表作者个人观点,与本网无关。看完本文，记得打分哦：很好下载Doc格式文档马上分享给朋友：?知道苹果代表什么吗实用文章，深受网友追捧比较有用，值得网友借鉴没有价值，写作仍需努力相关网页程序设计：
48小时热门CSS的工作原理（样式重复的标签，浏览器到底会选择哪个样式？？） - 大荒帝 - 推酷
CSS的工作原理（样式重复的标签，浏览器到底会选择哪个样式？？） - 大荒帝
举个例子，标签P，也许会在嵌入样式表、外部样式表中多次被设置相关属性的值(比如color:/color : blue)，那么浏览器到底是以哪个值来显示P的样式呢？？？这就是CSS的工作原理。（其中特指度比较重要）
CSS有3种工作机制：1.继承 & &2.层叠 & 3.特指 & （其中层叠原则是基于继承和特指的）
1.继承 ：css中的祖先元素会向后代传递一样东西：CSS属性的值。body是所有元素的祖先，如果我们指定body{color:},那么文档中的所有元素都继承这一样式。这就是为什么，我们在记事本程序写了一行字以后，重命名为：xxx.html，在用不同浏览器打开时，会有不同的字体效果，因为每个浏览器都有自己的预定义样式表，其中包括body中的字体属性，而我们用浏览器打开我们的Html时，我们继承了这个属性。
当然，不是所有的属性都能被继承，能被继承的属性大多数和文本有关，比如颜色、字体、字号等。而有些属性，被继承下来没有意义，或者被继承下来会影响页面的布局，比如涉及元素定位，margin,padding，border等属性。
2.层叠 ：也就是CSS中的C（cascading）,主要是按照样式来源和特指度来层叠。
& a）样式来源 ：以下是浏览器层叠各个来源样式的顺序：
浏览器默认样式表
用户样式表（比如有视力障碍的用户，加了一个body{font-size:200%}）
开发者外部样式表（按照引入到页面中的先后顺序）
开发者嵌入样式表
开发者行内样式表
注意：3 4的顺序是看&style&嵌入样式标签的位置，和&link&标签的位置，标签在后的被选中,请看例子2
越往下的优先级越高，也就是说浏览器会优先选择后面来源设置的样式（如果存在的话）
b)特指度 ：是针对选择器的计分规则，分高的选择器会被选中。公式有3个需要计算的值 ：I-C-E ，规则如下
选择器中有一个ID选择器，就在I上加1
选择器中有一个类选择器，就在C上加1
选择器中有一个标签名，就在E上加1
得到一个3位数
先比较高位，高位高既为高，比如1-0-0 是比 0-12-0 高的，优先选择。以此类推，如果特制度相同，后申明的样式被选中。
选择器，也有叫选择符的，英文应该是selector，CSS有很多种选择器，此处不详谈。
举个特指度的例子：
0-0-1特指度=1
0-1-1特指度是11
1-0-1特指度是101
body p#idp1
1-0-2特指度是102
body p#idp1 ul.classul1
1-1-3特指度是113
body p#idp1 ul.classul1 li
1-1-4特指度是114
基于3种工作机制，总结3条规则，适用所有情况。
1）ID选择器大于类选择器，类选择器大于标签选择器。一句话：特指度高的选择器（选择的更明确）被选中。
2）浏览器按照html文档顺序读取各个样式表，后面的样式表会覆盖掉前面样式表的相同属性的样式。如果后面的样式特指度低，则无法覆盖前面的样式
& & &注意：规则1 强于 规则2 ，如果特指度高，无论在哪里（除去行内），都会被选中。行内的优先级最高（但是行内的style一般不用，&p style=&&&），其次是特指度。
3）设定的样式优于继承的样式
例子1 ：id选择器优于类选择器&style&
.li1{color:} #li1{color:}
&link rel=&stylesheet& href=&demo.css&&
&div id=&div1&&
&ul class=&ul1&&
&li id=&li1& class=&li1&&列表项1&/li&
列表1为黄色
例子2 ：嵌入样式表和外部样式表，选哪个（主要看浏览器按顺序，后读取的会覆盖点前面读取的），相同特指度的时候&link rel=&stylesheet& href=&demo.css&&
.li1{color: red;}
&div id=&div1&&
&ul class=&ul1&&
&li id=&li1& class=&li1&&列表项1&/li&（黄色）外部样式表demo.css
&style&嵌入样式表在后，为红色。
如果是这个顺序，style标签在前，link在后
.li1{color:}
&link rel=&stylesheet& href=&demo.css&&
例子3：选择特指度高的（如按顺序，应该选择link的黄色，但是style中的特指度高 1-0-2 大于 1-0-1，所以选特指度高的红色），后面读取的特指度低的就不会覆盖前面特指度高的。&style&
body div #li1{color: red;}
&link rel=&stylesheet& href=&demo.css&&
&div id=&div1&&
&ul class=&ul1&&
&li id=&li1& class=&li1&&列表项1&/li&
例子4：行内style有最高优先级，前面的代码不变，只在p中加了style blue,列表项立马变成蓝色虽然行内的有最高优先级，但是行内style本身就不常用（不方便移植，增加网页大小）&li id=&li1& class=&li1& style=&color:&&列表项1&/li&
例子5 ：设定的样式优于继承的样式，即使继承的样式特指度高（在li中加入em,em继承了li的特指度是102，em本身的特指度是001，但是仍然选em）&style&
body div #li1{color: red;}
em{ color:black;}
&div id=&div1&&
&ul class=&ul1&&
&li id=&li1& class=&li1&&&em&列表项1&/em&&/li&
&/ul&列表项为黑色。
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致天极传媒：天极网全国分站
您现在的位置：
& &&为不同的浏览器载入不同CSS的二种方法
为不同的浏览器载入不同CSS的二种方法< 08:56
　　由于各浏览器(IE、gecko、......)对CSS的渲染方式都有所不同，造成显示效果不同，所以可通过对其载入不同CSS的方法来解决，下面介绍下二种方法来实现，不一定很实用，难的玩一把。
　　纯CSS方式
以下是引用片段：Code .box{ width:&20 height:20 background:&#369; } /*--gecko内核--*/ @media&all&and&(min-width:&0px){ box{ background:&#CC0000; } } /*--opera&hacks--*/ /*--不能通过W3C&CSS检验--*/ &!--[if&IE&]&&style& .box{&&&&background:&#808080; } &/style&&![endif]--&
　　以上代码运行的结果，在IE中是灰色，Opera中是紫红，Firefox中是蓝色
　　在以前版本还可采用CSS2的属性选择符来区别，不幸的是IE7开始已能识别。
　　本文章由forestgan于15-Oct-2006发表
　　javascript的方法
以下是引用片段：　　var&css_browser_selector&=&function()&{ 　　var 　　ua&=&navigator.userAgent.toLowerCase(), 　　is&=&function(t){&return&ua.indexOf(t)&!=&-1;&}, 　　h&=&document.getElementsByTagName('html')[0], 　　b&=&(!(/opera|webtv/i.test(ua))&&&&/msie&(\d)/.test(ua))&?&((is('mac')&?&'ieMac&'&:&'')&+&'ie&ie'&+&RegExp.$1) 　　:&is('gecko/')&?&'gecko'&:&is('opera')&?&'opera'&:&is('konqueror')&?&'konqueror'&:&is('applewebkit/')&?&'webkit&safari'&:&is('mozilla/')&?&'gecko'&:&'', 　　os&=&(is('x11')&||&is('linux'))&?&'&linux'&:&is('mac')&?&'&mac'&:&is('win')&?&'&win'&:&''; 　　var&c&=&b+os+'&js'; 　　h.className&+=&h.className?'&'+c:c; 　　}();
　　此脚本能区别更多的浏览器，具体使用方法可看脚本原作者网站。
&!--[if IE]&&style&
@import url("/tutorials/demo/css/ie.css");
&/style&&![endif]--&
&style type="text/css"&
padding: 1
color: #FFF;
text-align:
fon-size: 1.5
background: #369;
@media all and (min-width: 0px){
background: #C00;
&!--[if IE ]&&style&
background: #808080;
&/style&&![endif]--&
CSS Browser Selector
&div class="box"&
&p&IE中是灰色&/p&
&p&Opera中是紫红&/p&
&p&Firefox中是蓝色&/p&
如果不能正常显示，请刷新页面。 运行代码复制代码另存代码收藏本页
（作者：龙犊责任编辑：龙犊）
天极新媒体&最酷科技资讯扫码赢大奖
* 网友发言均非本站立场，本站不在评论栏推荐任何网店、经销商，谨防上当受骗！
Win10系统在Win8的基础上对界面、特性以及跨平台方面做了诸多优化。
手机整机DIY企业级
pc软件手机软件各种浏览器不同版本的css hack 大全
各种浏览器不同版本的css hack 大全
在这个浏览器百花争鸣的时代，作为前端开发的我们为了我们漂亮的设计能适应各个浏览器可为煞费苦心，主要体现在javascript和css上面。javascript我这次就不谈了，先说说css。
为了适应不同浏览器不同的版本（版本主要就ie来说），ie这朵奇葩现在我们要兼容6-9，它的10也快出来了。。。在ie下我们可以写条件注释来区分ie和其他浏览器，以及ie的版本，这些请大家自行google。这篇文章主要讨论的是css hack。下面废话补多说了，直接上代码
[html]代码
&!DOCTYPE html&
&title&Css Hack&/title&
height:300
background-color:
/*firefox*/
background-color:red\9;
/*all ie*/
background-color:yellow\0;
+background-color:
_background-color:
:root #test { background-color:purple\9; }
@media all and (min-width:0px){ #test {background-color:black\0;} }
@media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:} }
/*chrome and safari*/
&div id=&test&&test&/div&
上面这段代码大家可以直接copy出来，保存成html在各浏览器试试。下面我来分析下：
& & background-color: 各个浏览器都认识，这里给firefox用；
& & background-color:red\9;\9所有的ie浏览器可识别；
& & background-color:yellow\0; \0 是留给ie8的，但笔者测试，发现最新版opera也认识，汗。。。不过且慢，后面自有hack写了给opera认的，所以，\0我们就认为是给ie8留的；
& & +background-color: + ie7定了；
& & _background-color: _专门留给神奇的ie6；
& & :root #test { background-color:purple\9; } :root是给ie9的，网上流传了个版本是 :root #test { background-color:purple\0;}，呃。。。这个。。。，新版opera也认识，所以经笔者反复验证最终ie9特有的为:root 选择符 {属性\9;}
& & @media all and (min-width:0px){ #test {background-color:black\0;} } 这个是老是跟ie抢着认\0的神奇的opera，必须加个\0,不然firefox，chrome，safari也都认识。。。
& & @media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:} }最后这个是浏览器新贵chrome和safari的。
& & 好了就这么多了，特别注意以上顺序是不可以改变的。css hack虽然可以解决个浏览器之间css显示的差异问题，但是毕竟不符合W3C规范，我们平时写css最好是按照标准来，这样对我们以后维护也是大有好处的，实在不行再用。
& & 如果给位看官有更好的css hack写法或者本文有不妥之处，欢迎留言，第一次写文章，请轻砸。本帖子已过去太久远了，不再提供回复功能。}