UC浏览器对CSS存在一些“特殊照顾”
CSS在不同浏览器使用不同效果概览
1.css在不同浏览器下显示效果不同firefox和IE对某些css样式的认定有不少区别，包括：ul和ol的默认padding值是不一样的，在Firefox中，padding-left默认值为40px左右，而IE中为0，一般设置ul{margin:0;padding:0;}就能解决大部分问题对字体大小small的定义不同，Firefox中为13px，而IE中为16px，差别挺大，也只能设置为14px 了事；(暂时没有发现)并列排列的多个元素（图片或者链接）的代码中的空格和回车会造成元素之间的间隙，而在firefox中和在IE中显示是不一样的，IE显示空格（约8px）、firefox显示空格（约4px）对不规范代码的兼容情况不同，IE中漏掉的关闭符号对显示不造成影响，而firefox中就会形成错乱的布局，而在ie中用到的padding和margin的负值都会被firefox解析为0，易造成布局的混乱；（我觉得好像负值在firefox中也是有显示的）firefox对于长高尺寸的严格解析会造成与设置不匹配（超出）的图片或表格将原设置div撑大；！important属性可以在除IE浏览器的其他浏览器中起作用，因此有人利用这种差别来令一个CSS兼容多种浏览器；未定义id的div，在IE中会与div属性中的其他设置有关，而在firefox中的位置会于div在文件中位置有关，紧随前一个div出现……（有待尝试）设置为float的div在ie下设置的margin会加倍的，特别是margin-left，这是ie6的一个bug。
解决的方法是在这个div里面加上display:inline;如果是动态地添加内容，高度最好不要定义。
浏览器可以自动伸缩，然而如果是静态的内容，高度最好定好。
（似乎有时候不会自动往下撑开，不知道具体怎么回事）FF: div 设置margin-left, margin-right 为auto 时已经居中, IE 不行。
CSS浏览器兼容性处理解决不同浏览器的样式差异
CSS浏览器兼容性处理解决不同浏览器的样式差异CSS浏览器兼容性处理：解决不同浏览器的样式差异在网页设计与开发过程中，我们经常会遇到在不同浏览器下显示效果不一致的情况。
这是由于不同浏览器对CSS样式的解析和支持程度不同导致的。
为了解决这些浏览器的兼容性问题，我们需要采取一些措施，使得网页在各种浏览器下都能够达到一致的效果。
本文将介绍一些常见的CSS兼容性处理技巧，帮助您解决不同浏览器的样式差异。
一、CSS hack技巧1. 选择器优先级在CSS中，选择器的优先级决定了哪个样式会被浏览器应用。
可以通过提高选择器的优先级来确保样式被正确地应用。
一般来说，ID选择器的优先级最高，紧接着是类选择器和属性选择器，最后是标签选择器。
2. 浏览器前缀某些CSS属性在不同浏览器下需要添加前缀才能得到正确的效果，例如-webkit、-moz和-o等。
通过添加不同浏览器的前缀，可以确保样式在各个浏览器中一致地显示。
可以使用CSS预处理器如Sass或Less来自动生成带有前缀的代码。
3. 条件注释条件注释是一种只有特定浏览器会解析的代码，通过条件注释可以为不同浏览器提供不同的样式。
例如：<!--[if IE]>xxx<![endif]--> 可以仅在IE浏览器中应用xxx样式，从而解决IE浏览器的兼容性问题。
二、CSS兼容性库1. Normalize.cssNormalize.css是一个跨浏览器的CSS文件，它几乎可以为所有的HTML元素提供一致的默认样式。
通过引入Normalize.css，可以统一各个浏览器的默认样式，从而避免不同浏览器之间的样式差异。
2. AutoprefixerAutoprefixer是一个基于CSS规范的自动添加浏览器前缀的工具。
它可以根据你设置的浏览器兼容范围自动添加所需的前缀，大大简化了处理浏览器兼容性的工作。
三、媒体查询1. 响应式设计媒体查询是CSS3的一个重要特性，它可以根据不同的设备或屏幕尺寸应用不同的样式，从而实现响应式设计。
解决CSS浏览器兼容性问题的4种方案
解决CSS浏览器兼容性问题的4种⽅案前端是⼀个苦逼的职业，不仅因为技术更新快，⽽且要会的东西实在太多了，更让⼈头疼的是，还要⾯临各种适配、兼容性问题。
为什么会有浏览器兼容性问题？还不是因为浏览器⼚商太多了！Chrome，Frirefox，Safari，Edge，IE6，IE7，IE8，IE9...360安全浏览器，qq浏览器，世界之窗，TT，搜狗，opera，maxthon（傲游）……关键是不同⼚商，甚⾄同⼀⼚商不同版本，对同⼀段CSS的解析效果也不⼀致，这就导致了页⾯显⽰效果不统⼀，也就带来了兼容性问题。
多么希望Chrome能够⼀统江湖啊~~⽬前各浏览器市场份额浏览器这么多，我们也不可能每⼀个都要去兼容，对于⽤户量⼀般的产品，把主流浏览器的适配做好，就已经很不错啦。
根据百度流量研究院提供的2018年8⽉⾄2019年2⽉的数据可以看出，Chrome占⽐46.28%，IE系仍然占有很⼤⽐重，任重⽽道远啊~CSS浏览器兼容性问题的解决思路和⽅案今天，不想去关注太多细节问题，⽐如那个css样式需要我们去兼容，⽽是想讨论⼀下⼤的解决思路，主要包括4个⽅⾯，浏览器CSS样式初始化、浏览器私有属性，CSS hack语法和⾃动化插件。
1. 浏览器CSS样式初始化由于每个浏览器的css默认样式不尽相同，所以最简单有效的⽅式就是对其进⾏初始化，相信很多朋友都写过这样的代码，在所有CSS开始前，先把marin和padding都设为0，以防不同浏览器的显⽰效果不⼀样。
*{margin: 0;padding: 0;}关于浏览器CSS样式初始化，经验不丰富的话，可能也不知道该初始化什么，这⾥给⼤家推荐⼀个库，Normalize.css，github star数量接近3.4万，选取展⽰其中⼏个样式设置，如下html {line-height: 1.15; /* Correct the line height in all browsers */-webkit-text-size-adjust: 100%; /* Prevent adjustments of font size after orientation changes in iOS. */}body {margin: 0;}a {background-color: transparent; /* Remove the gray background on active links in IE 10. */}img {border-style: none; /* Remove the border on images inside links in IE 10. */}通过CSS样式初始化，相信能解决不少常规的兼容性问题，接下来再看看浏览器的私有属性。
CSS浏览器兼容性与解决方法
CSS浏览器兼容性与解决⽅法⼀.什么是浏览器兼容性问题？所谓的浏览器兼容性问题，是指不同的浏览器对同⼀段代码有不同的解析，造成页⾯显⽰效果不统⼀的情况；⽽造成浏览器兼容问题的根本原因，是浏览器的内核不同导致的。
认识浏览器内核浏览器类型内核 js引擎IE Trident jscriptFirefox Gecko TraceMonkeyChrome WebKit, Blink V8Safari WebKit SquirrelFish ExtremeOpera Presto Carakancss浏览器兼容性问题的解决思路和⽅案1.使⽤css Hack解决兼容性问题浏览器在读取CSS代码的时候可能会遇到⼀些⽆法识别的代码，造成这种现象的原因通常有两种：1. 代码本⾝有问题，如： bg:red ，bg并不是⼀个有效的css属性2. 代码没问题，但浏览器的内核不能识别，如： box-sizing:border-box ，这句代码本⾝没有问题，但由于使⽤的是CSS3的属性box-sizing ，会造成在⼀些低版本内核的浏览器中⽆法识别。
总之，当浏览器遇到这些⽆法识别的代码时，它会怎么做呢？和java、C#等后端语⾔不同，浏览器不会中⽌程序的执⾏，它会⽴即跳过这些⽆法识别的代码，就当作没看见⼀样，继续执⾏后⾯的代码。
就向下⾯这个例⼦⼀样：.main{color1 : red; /*这句代码⽆法被浏览器识别，浏览器就当这句代码不存在*/color: green;}浏览器⽅⾯，除了拥有这种特殊的错误处理⽅式之外，不同的浏览器内核，以及浏览器内核的不同版本，它们同时拥有⾃⼰独特的CSS属性，这些属性在CSS标准之外。
造成这种现象的原因是⼀些历史遗留问题。
⽐如，webkit内核的浏览器能够识别-webkit-box-sizing:border-box; ，在没有box-sizing的年代，它就是通过-webkit-box-sizing 来设置盒⼦宽⾼影响范围的，但其他内核的浏览器是⽆法识别该属性的。
CSS样式兼容性的检测与处理方法
CSS样式兼容性的检测与处理方法一.CSS样式兼容性的检测与处理方法CSS（层叠样式表）是一种用来描述网页样式的语言，可以控制网页的布局、字体、颜色等各个方面。
然而，由于不同浏览器或设备对CSS的支持度不同，会导致网页在不同环境下显示效果不一致或出现兼容性问题。
为了解决这些问题，本文将介绍CSS样式兼容性的检测与处理方法。
一、兼容性检测方法1.使用caniuse网站：caniuse是一个在线工具，可以查询不同属性或特性在各个浏览器中的支持情况。
根据查询结果可以了解哪些属性需要特殊处理或替代方案。
2.使用CSS兼容性前缀：不同浏览器支持不同的CSS前缀，例如-moz-、-webkit-、-o-等。
通过为CSS属性添加对应的前缀，可以使其在不同浏览器中得到正确的解析和渲染。
3.使用JavaScript检测：通过JavaScript的能力检测方法，可以判断当前浏览器是否支持某个CSS属性或特性。
根据判断结果，可以采取相应的处理方法。
二、兼容性处理方法1.渐进增强：该方法要求先考虑最基本的功能，在此基础上不断增加更高级的特性。
通过为不同浏览器提供不同的样式，确保网页在各个环境下都能正常显示。
这种方法强调向下兼容，适合对低版本浏览器提供支持的场景。
2.优雅降级：与渐进增强相反，优雅降级是先构建完整的功能，然后逐步去除一些高级特性，以适应不同浏览器或设备的限制。
这种方法强调向上兼容，适合先为高级浏览器提供更好的用户体验的场景。
3.使用CSS Hack：CSS Hack是指通过编写特定的CSS代码，以便只在特定浏览器中生效或不生效。
例如，针对IE浏览器的特殊处理，可以使用条件注释或选择器Hack等技术手段。
4.使用CSS重置样式：不同浏览器对默认样式的设置有差异，这可能导致网页在不同环境下显示效果不同。
通过引入CSS重置样式表，可以将不同浏览器的默认样式统一化，减少兼容性问题。
三、案例分析以现代浏览器对于CSS3的支持度较高为例，假设我们需要实现一个圆角按钮（border-radius属性）：```css.button {border-radius: 5px;}```但是在某些旧版本的IE浏览器中，border-radius属性不受支持，因此我们需要针对IE浏览器增加特定的样式：```css.button {border-radius: 5px; /* 现代浏览器支持 */-moz-border-radius: 5px; /* Firefox 浏览器支持 */-webkit-border-radius: 5px; /* Chrome 和 Safari 浏览器支持 */behavior: url(border-radius.htc); /* 使用HTC行为文件实现圆角效果*/}```通过以上处理，我们可以在不同浏览器中实现圆角按钮的效果，保证了网页在各个环境下的兼容性。
解决不同浏览器兼容性不一致导致css的animation不起效
解决不同浏览器兼容性不⼀致导致css的animation不起效最近项⽬中，需要把APP的纯html5的项⽬显⽰在⼀个移动的⼴告屏上边，⼴告屏是基于安卓系统的，浏览器不清楚什么版本，直接使⽤css 的animation是不⽀持的。
有⼀个页⾯是通过animation实现页⾯的图⽚的跳动，结果浏览器不⽀持，刚开始使⽤js解决（结果js解决由于⽔平不够导致效果不好，⽽且还会弹出⽩⾊的块，电脑浏览器都不会出现这个，就这个⼴告屏出现，真的恶⼼）⽆奈之下，只能让浏览器去兼容css的animation。
⼀开始页⾯的css代码是这样的@keyframes rotate {0%{transform: translateY(0);}25%{transform: translateY(-10px);}50%{transform: translateY(-20px);}75%{transform: translateY(-10px);}100%{transform: translateY(0);}}.active{animation:rotate 1s linear infinite;} 这段代码就是让图⽚不停地上下跳动跳动，有兴趣的可以复制下来找张图⽚玩玩，不能兼容项⽬需要的浏览器，需要修改为@-webkit-keyframes rotate {0%{-webkit-transform: translateY(0);}25%{-webkit-transform: translateY(-2vmin);}50%{-webkit-transform: translateY(-4vmin);}75%{-webkit-transform: translateY(-2vmin);}100%{-webkit-transform: translateY(0);}}@-o-keyframes rotate {0%{-webkit-transform: translateY(0);}25%{-webkit-transform: translateY(-2vmin);}50%{-webkit-transform: translateY(-4vmin);}75%{-webkit-transform: translateY(-2vmin);}100%{-webkit-transform: translateY(0);}}@-moz-keyframes rotate {0%{-webkit-transform: translateY(0);}25%{-webkit-transform: translateY(-2vmin);}50%{-webkit-transform: translateY(-4vmin);}75%{-webkit-transform: translateY(-2vmin);}100%{-webkit-transform: translateY(0);}}@keyframes rotate {0%{-webkit-transform: translateY(0);}25%{-webkit-transform: translateY(-2vmin);}50%{-webkit-transform: translateY(-4vmin);}75%{-webkit-transform: translateY(-2vmin);}100%{-webkit-transform: translateY(0);}}.active{-webkit-animation:rotate 1s linear infinite;-o-animation:rotate 1s linear infinite;-moz-animation:rotate 1s linear infinite;animation:rotate 1s linear infinite;} 代码有点长（动画的代码多），就是为了处理兼容性问题。
CSS各浏览器兼容问题整理
目录目录 (1)一、IE6/IE7/IE8/Firefox/Chrome/Safari的CSS hack兼容一览表 (3)1) 区别IE和非IE浏览器 (3)2) 区别IE6,IE7,IE8,FF (3)3) 区别IE6、IE7、Firefox (方法1) (4)4) 区别IE6、IE7、Firefox (方法2) (4)5) 区别IE7、Firefox (4)6) 区别IE6、IE7 (方法1) (4)7) 区别IE6、IE7 (方法2) (5)8) 区别IE6、Firefox (5)二、IE 的if条件Hack (5)三、对齐产生的问题 (6)1) div的居中对齐问题 (6)2) div中文字垂直居中对齐的问题 (7)3) 怎样使一个层垂直居中于浏览器中 (7)4) 如何对齐文本与文本输入框 (7)四、宽高问题 (7)1) IE6下容器的宽度和FF解释不同 (7)2) 页面的最小宽度 (8)3) 为什么无法定义1px左右高度的容器 (8)4) Firefox 关于DIV高度无法自适应 (8)5) div重叠的现象 (9)6) IE与宽度和高度的问题 (9)7) div嵌套时，外层div高度不能自适应 (10)8) div嵌套时y 轴上外层div 到内层div 的距离的问题 (10)9) padding，marign，height，width 的傻瓜式解决技巧 (10)10) FORM标签 (10)五、浮动 (11)1) margin加倍的问题 (11)2) DIV浮动IE文本产生3象素的bug (11)3) 怎么样才能让层显示在FLASH之上呢 (11)4) float的div闭合;清除浮动 (12)5) 自适应高度 (13)六、列表类 (13)1) UL的padding与margin (13)2) ul和ol列表缩进问题 (14)3) list-style-image无法准确定位 (14)4) LI中内容超过长度后以省略号显示的方法 (14)七、链接 (14)1) 游标手指cursor (14)2) ,给a标签内内容加上样式, (15)3) 链接(a标签)的边框与背景 (15)4) ff不支持expression 例如去掉链接的边框要分别写不同的css (15)5) 超链接访问过后hover样式就不出现的问题 (15)八、背景、图片类 (15)1) IE6下为什么图片下有空隙产生 (15)2) 图片垂直于容器内 (15)3) background 显示问题 (16)4) 背景颜色无法显示 (16)5) 背景透明问题 (17)九、其他问题 (17)1) 如何使连续长字段自动换行 (17)2) 为什么web标准中IE无法设置滚动条颜色了 (18)3) 属性选择器(这个不能算是兼容,是隐藏css的一个bug) (19)4) IE捉迷藏的问题 (19)5) BOX模型解释不一致问题 (19)6) IE6下绝对定位的容器内文本无法正常选择 (19)7) CSS双线凹凸边框 (19)8) IE选择符空格BUG (20)9) ff不支持<body scroll="no" > scroll属性 (21)10) ff不支持数据岛绑定 (21)11) ff不能用.click();方法打开链接 (21)12) 目前FF2.0为止都不支持IE的name锚点 (22)一、IE6/IE7/IE8/Firefox/Chrome/Safari的CSS hack兼容一览表不同的浏览器对CSS的解释都有一点出入，特别是padding, line-height这些要细微控制的地方，下面的hack基本可以解决这个问题：详细查看•在属性前加下划线(_)，那么此属性只会被IE6解释•在属性前加星号(*)，此属性只会被IE7解释•在属性值后面加"\9"，表示此属性只会被IE8解释各浏览器CSS hack兼容表：代码如下:#test{color:red; /* 所有浏览器都支持*/color:red !important; /* Firefox、IE7支持*/_color:red; /* IE6支持*/*color:red; /* IE6、IE7支持*/*+color:red; /* IE7支持*/color:red\9; /* IE6、IE7、IE8支持*/color:red\0; /* IE8支持*/}body:nth-of-type(1) p{color:red;} /* Chrome、Safari支持*/1)区别IE和非IE浏览器【区别符号】：「*」、「\9」#tip{background:blue; /*非IE背景藍色*/background:red\9; /*IE6、IE7、IE8背景紅色*/}（详细查看）2)区别IE6,IE7,IE8,FF【区别符号】：「*」、「_」、「!important」#tip{background:blue; /*Firefox背景变蓝色*/background:red\9; /*IE8背景变红色*/*background:black; /*IE7 背景变黑色*/_background:orange; /*IE6 背景变橘色*/}【说明】：因为IE系列浏览器可读「\9」，而IE6和IE7可读「*」(米字号)，另外IE6可辨识「_」(底线)，因此可以依照顺序写下来，就会让浏览器正确的读取到自己看得懂得CSS语法，所以就可以有效区分IE 各版本和非IE浏览器(像是Firefox、Opera、Google Chrome、Safari等)。
CSS的特殊性（specificity）
CSS的特殊性（specificity）
特殊性是⼀个选择器"特殊程度"的数字表⽰。
它可以描述成⼀个4个位置的点数串: 0.0.0.0 。
为帮助理解，我们甚⾄可以将其看成⼀个四位的数值，数值越⼤的特殊性越⾼(例如:0.1.0.0(100)>0.0.1.2(12))，特殊性越⾼的属性会覆盖特殊性较低的属性.
⽤值表⽰：
每个内联样式(body)的特殊性为 1.0.0.0(1000)
每个ID选择器的特殊性为 0.1.0.0(100)
每个类或者伪类的特殊性为 0.0.1.0(10)
每个元素和伪元素的特殊性为 0.0.0.1(1)
连接符和通配符为 0.0.0.0(0)
例如：
p a{color:red}
body * a{color:blue}
两者特殊性相同。
继承不具有特殊性，也就是说：继承特殊性⽐*还⼩，连0都没有(可以这样理解⽽已)。
例如：
*{color:red}
p{color:blue}
<p>I'm blue<b>I'm red</b></p>
浏览器中：p标签内aaaaaaa为蓝⾊，b标签内为红⾊。
写在HTML页⾯中的头部内联样式(style)会覆盖外链样式(link)中相同属性设定。
设定了!important(重要声明)的属性特殊性最⾼，也就是说⽐body内内联样式更⾼！。
CSS兼容性处理方案
CSS兼容性处理方案CSS的兼容性问题是前端开发中常遇到的挑战之一。
不同的浏览器对CSS的解析和渲染方式存在差异，导致网页在不同浏览器上显示效果不一致。
本文将介绍一些常见的CSS兼容性处理方案，帮助开发者更好地解决兼容性问题。
一、CSS ResetCSS Reset是一种常见的兼容性处理方案，它通过重置浏览器默认的CSS样式来消除浏览器之间的差异。
不同的浏览器对元素的默认样式有不同的定义，所以在进行布局和样式设计时，我们需要先将这些默认样式重置为一个统一的基准，然后再进行自定义样式的设计。
常见的CSS Reset库包括Normalize.css和Reset.css，开发者可以根据需要选择合适的库来使用。
二、浏览器前缀部分CSS属性在不同浏览器中存在兼容性差异，为了解决这个问题，开发者可以使用浏览器前缀来为不同浏览器提供特定的样式。
浏览器前缀是一种特定于浏览器的CSS属性前缀，用于指定某个CSS属性在特定浏览器中的实现方式。
常见的浏览器前缀包括-webkit-、-moz-、-ms-和-o-，分别对应Webkit内核、Gecko内核、Trident内核和Presto内核。
通过为某个属性添加不同的前缀，可以保证该属性在各个浏览器中正常显示。
三、条件注释条件注释是一种只在特定版本的IE浏览器中生效的注释语法。
通过使用条件注释，可以为特定版本的IE浏览器提供特定的CSS代码，从而解决不同IE版本之间的兼容性问题。
例如，可以使用条件注释来为IE6提供特定的布局样式，从而弥补IE6本身的不足。
需要注意的是，从IE10开始，IE不再支持条件注释，所以使用条件注释时需要谨慎考虑兼容性问题。
四、媒体查询媒体查询是一种CSS3的特性，它可以根据不同的媒体类型和特定的条件来应用不同的CSS样式。
通过使用媒体查询，可以为不同的设备和屏幕尺寸提供不同的样式，从而实现响应式设计。
开发者可以通过媒体查询来解决不同设备和浏览器之间的兼容性问题，使网页在不同设备上都能正常显示。
CSS浏览器兼容性常见问题总结大全（推荐）
CSS浏览器兼容性常见问题总结⼤全（推荐）DIV＋CSS设计IE6、IE7、FF 兼容性DIV＋CSS⽹页布局这是⼀种趋势,我也开始顺应这股趋势了,不过在使⽤DIV＋CSS⽹站设计的时候，应该注意css样式兼容不同浏览器问题，特别是对完全使⽤DIV+CSS设计的⽹页，就应该更注意IE6 IE7 FF对CSS样式的兼容.什么是浏览器兼容：当我们使⽤不同的浏览器（Firefox IE7 IE6）访问同⼀个⽹站，或者页⾯的时候，会出现⼀些不兼容的问题，在这种浏览器下显⽰正常，在另⼀种下就乱了，我们在编写CSS的时候会很恼⽕，刚修复了这个浏览器的问题，结果另外⼀个浏览器却出了新问题。
⼀、!important (功能有限)随着IE7对!important的⽀持, !important ⽅法现在只针对IE6的兼容.(注意写法.记得该声明位置需要提前.)例如:#example {width: 100px !important; /* IE7+FF */width: 103px; /* IE6 */}⼆、CSS HACK的⽅法⾸先需要知道的是：所有浏览器通⽤ height: 100px;IE6 专⽤ _height: 100px;IE7 专⽤ *+height: 100px;IE6、IE7 共⽤ *height: 100px;IE7、FF 共⽤ height: 100px !important;例如：#example { height:100px; } /* FF */* html #example { height:200px; } /* IE6 */*+html #example { height:300px; } /* IE7 */下⾯的这种⽅法⽐较简单举⼏个例⼦：1、IE6 - IE7+FF#example {height:100px; /* FF+IE7 */_height:200px; /* IE6 */}其实这个⽤上⾯说的第⼀种⽅法也可以#example {height:100px !important; /* FF+IE7 */height:200px; /* IE6 */}2、IE6+IE7 - FF#example {height:100px; /* FF */*height:200px; /* IE6+IE7 */}3、IE6+FF - IE7#example {height:100px; /* IE6+FF */*+height:200px; /* IE7 */}4、IE6 IE7 FF 各不相同#example {height:100px; /* FF */_height:200px; /* IE6 */*+height:300px; /* IE7 */}或：#example {height:100px; /* FF */*height:300px; /* IE7 */_height:200px; /* IE6 */}需要注意的是，代码的顺序⼀定不能颠倒了，要不⼜前功尽弃了。
对常见的css属性进行浏览器兼容性总结（推荐）
对常见的css属性进⾏浏览器兼容性总结（推荐）为什么要对css属性进⾏浏览器兼容性总结呢？⽤的时候，直接去 Can I Use ⾥⾯检索浏览器对该属性的兼容性情况不就好了吗？css3.jpeg其实，在实际的开发过程中，我们对常见的css属性兼容情况了然于胸，才能极⼤的提⾼我们的开发效率，写出可以进⾏优雅降级的代码。
这⾥并不是说⼀定要所有的css属性兼容情况都要背下来，对于使⽤率较低的，我们直接使⽤Can I Use 进⾏检索。
边框：border-radius: 最低兼容⾄ IE9,其它浏览器兼容情况优良。
box-shadow: 最低兼容⾄IE9, 其它浏览器兼容情况优良。
背景：background-size: 最低兼容⾄IE9, 其它浏览器兼容情况优良。
字体：@font-face: IE9及以上版本的IE浏览器，⽀持引⼊任何格式的字体⽂件，⽽在IE9之前的浏览器，只⽀持引⼊EOT格式的字体⽂件。
其它浏览器兼容情况优良。
2D转换：transform: 最低兼容⾄IE9（需要添加-ms-前缀），其它浏览器兼容情况优良。
在transform属性前加⼊浏览器内核前缀是很好的实践。
不建议在svg元素上使⽤transform属性，最新版本的IE并不⽀持这⼀使⽤⽅式。
3D转换：IE10 和 Firefox ⽀持 3D 转换。
Chrome 和 Safari 需要前缀 -webkit-。
Opera 仍然不⽀持 3D 转换，它只⽀持2D 转换。
过渡：transition:最低兼容⾄IE10，其它浏览器兼容情况优良。
Safari浏览器需要前缀-webkit-，其它⼤部分浏览器对此并未有前缀要求，因此除了特殊情况，可以不添加其它浏览器的前缀。
动画：animation:兼容情况与transition属性⼤致相同。
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。
css important 参数
CSS（Cascading Style Sheets）是一种用来描述HTML或XML文档样式的语言，它可以用来对网页的布局、字体、颜色、背景等方面进行样式设计。
在CSS中，有一些重要的参数可以帮助我们更好地控制网页的样式，本文将对CSS中的important参数进行详细介绍和讨论。
1. 重要性在CSS中，如果多个样式规则应用到同一个元素上，浏览器会根据“层叠”的原则来确定最终应用哪个样式。
通常情况下，浏览器会根据样式的特异性（specificity）和样式规则的先后顺序来决定哪个样式会被应用。
2. important参数的作用在CSS中，可以使用!important参数来强制指定某个样式规则，使其具有高于其他样式规则的优先级。
使用!important参数可以覆盖其他普通样式规则，确保指定的样式可以生效。
3. 使用方法在CSS中，可以在样式规则的属性值后面添加!important参数，以表示这个样式规则的重要性。
例如：```p {color: red !important;}```上述示例中，p元素的文字颜色将会被设置为红色，并且具有非常高的优先级，其他普通的样式规则很难覆盖这个设置。
4. 注意事项虽然!important参数可以帮助我们快速地解决样式覆盖的问题，但是在实际使用中需要慎重考虑。
因为!important参数会削弱CSS样式的可维护性和可读性，可能会导致样式的混乱和不可预测的后果。
5. 替代方案为了避免滥用!important参数，我们可以尝试使用其他方法来提高样式的优先级，例如提高样式规则的特异性，或者重新调整样式规则的顺序。
使用嵌套的CSS规则或者使用更具体的选择器也是提高样式优先级的有效方法。
6. 总结在CSS中，important参数可以帮助我们快速地解决样式覆盖的问题，但是需要慎重考虑使用。
在实际开发中，我们应该尽量避免滥用!important参数，而是通过调整样式规则的特异性和顺序来提高样式的优先级，以确保样式代码的可维护性和可读性。
CSS多浏览器兼容性问题和解决方案.docx
CSS 多浏览器兼容性问题及解决方案兼容性处理要点1、DOCTYPE 影响CSS 处理2、FF: 设置padding 后，div 会增加height 和width，但IE 不会，故需要用!important 多设一个height 和width3、FF: 支持!important，IE 则忽略，可用!important 为FF 特别设置样式4、div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高line-height:200px; 然后插入文字，就垂直居中了。
缺点是要控制内容不要换行5、在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法：div{margin:30px!important;margin:28px;}注意这两个margin的顺序一定不能写反，!important这个属性IE不能识别，但别的浏览器可以识别。
所以在IE下其实解释成这样：div{maring:30px;margin:28px}重复定义的话按照最后一个来执行，所以不可以只写margin:XXpx!important;浏览器差异1、ul和ol列表缩进问题消除ul、ol等列表的缩进时，样式应写成：list-style:none;margin:0px;padding:0px;其中margin属性对IE有效，padding属性对FireFox有效。
[注]经验证，在IE中，设置margin:0px可以去除列表的上下左右缩进、空白以及列表编号或圆点，设置padding对样式没有影响；在Firefox 中，设置margin:0px仅仅可以去除上下的空白，设置padding:0px后仅仅可以去掉左右缩进，还必须设置list- style:none才能去除列表编号或圆点。
也就是说，在IE中仅仅设置margin:0px即可达到最终效果，而在Firefox中必须同时设置margin:0px、padding:0px以及list-style:none三项才能达到最终效果。
CSS新特性与兼容性知识点
CSS新特性与兼容性知识点CSS（层叠样式表）是一种用于描述网页上元素样式的标记语言。
随着Web技术的发展，CSS也在不断演进，不断推出新的特性和功能以满足设计师和开发者的需求。
本文将介绍一些CSS的新特性，并探讨在使用这些新特性时需要注意的兼容性知识点。
一、CSS新特性1. Flexbox布局Flexbox是一种现代的布局方式，能够实现灵活的盒模型布局。
通过使用Flexbox，我们可以轻松地在容器内排列和对齐元素，而无需使用传统的浮动和定位等技术。
Flexbox特性的引入大大简化了网页布局的复杂度，并提供了更多灵活性。
2. Grid布局Grid布局是另一种强大的网页布局方式。
它通过将页面划分为行和列的网格，使得我们能够更精确地控制元素的位置和大小。
相比Flexbox布局，Grid布局更适合构建规则化和复杂的布局结构，同时也具有更高的表现力。
3. 自定义变量CSS自定义变量（也称为CSS变量或CSS全局属性）允许我们定义一组全局成员变量，供整个样式表内多个规则使用。
通过使用自定义变量，我们可以更便捷地调整和管理网页上的样式。
自定义变量的引入使得CSS样式表更容易维护和扩展，提高了代码的可重用性。
4. 过渡和动画CSS过渡和动画是两个强大的动态效果特性。
过渡（transition）能够平滑地改变元素的样式属性，使得元素的变化显得平滑而自然；动画（animation）则能够创建更复杂的动态效果，比如旋转、淡入淡出等。
通过使用过渡和动画，我们可以增强用户对网页的交互体验，使网页更加生动有趣。
5. 响应式设计响应式设计是一种以适应不同设备和屏幕尺寸为核心的设计思想。
CSS的新特性对于实现响应式布局非常重要。
媒体查询（media queries）是一种CSS3的特性，它可以根据设备的特性（如屏幕宽度、设备类型）动态地应用不同的样式。
通过使用媒体查询，我们可以实现针对不同设备的样式调整，以提供更好的用户体验。
CSS浏览器兼容性问题的解决方法
CSS浏览器兼容性问题的解决方法在网页开发中，CSS（层叠样式表）起到了非常重要的作用，它用于控制网页的样式和布局。
然而，由于不同浏览器的实现方式存在差异，导致CSS在不同浏览器中渲染效果不一致，这就是CSS浏览器兼容性问题。
本文将介绍一些解决CSS浏览器兼容性问题的方法。
一、重置CSS样式在进行网页开发时，不同浏览器会有一些默认的样式设置，造成不同浏览器之间呈现的效果差异较大。
为了解决这个问题，我们可以使用CSS重置来统一不同浏览器的默认样式。
CSS重置的目的是将所有浏览器的默认样式设置为一致的，然后再根据需要重新定义样式。
二、使用浏览器厂商前缀有些CSS属性在不同浏览器中的实现方式不同，为了适应不同浏览器的兼容，我们可以使用浏览器厂商前缀。
常见的浏览器厂商前缀有：-webkit- (Chrome、Safari)、-moz- (Firefox)、-o- (Opera)、-ms- (IE)。
通过给CSS属性添加对应的浏览器厂商前缀，可以在不同浏览器中获得一致的效果。
三、使用CSS HackCSS Hack是一种通过针对不同浏览器的特殊处理方式，来解决浏览器兼容性问题的方法。
例如，我们可以针对不同版本的IE浏览器使用不同的CSS Hack来解决特定样式的兼容性问题。
然而，由于CSSHack的使用方式比较复杂，而且可能存在一些潜在的风险和问题，推荐在实际开发过程中谨慎使用。
四、使用CSS预处理器CSS预处理器是一种将类似于编程语言的语法转换为标准CSS语法的工具，它可以帮助我们更方便地书写和维护CSS代码。
常见的CSS预处理器有Sass、Less和Stylus等。
通过使用CSS预处理器，我们可以使用变量、嵌套、混合等功能来提高开发效率，并且可以避免一些兼容性问题。
五、使用CSS框架CSS框架是一套经过预先设计和封装的CSS样式库，可以快速搭建网页的结构和样式。
常见的CSS框架有Bootstrap和Foundation等。
css样式兼容不同浏览器问题解决办法
css样式兼容不同浏览器问题解决办法在网站设计的时候，应该注意css样式兼容不同浏览器问题，特别是对完全使用DIV CSS设计的网，就应该更注意IE6 IE7 FF对CSS样式的兼容，不然，你的网乱可能出去不想出现的效果！所有浏览器通用height: 100px; IE6 专用_height: 100px; IE6 专用*height: 100px; IE7 专用*+height: 100px; IE7、FF 共用height: 100px !important;一、CSS HACK1, !important随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.)以下为引用的内容：2, IE6/IE7对FireFox以下为引用的内容：*+html 与 *html 是IE特有的标签, firefox 暂不支持.而*+html 又为 IE7特有标签.注意:*+html 对IE7的HACK 必须保证HTML顶部有如下声明：二、万能 float 闭合关于 clear float 的原理可参见 [How To Clear Floats Without Structural Markup]将以下代码加入Global CSS 中,给需要闭合的div加上class=”clearfix” 即可,屡试不爽.以下为引用的内容：三、其他兼容技巧1, FF下给 div 设置 padding 后会导致 width 和 height 增加, 但IE不会.(可用!important解决) 如width:115px !important;width:120px;padding:5px;必须注意的是，!important; 一定要在前面。
2, 居中问题.1).垂直居中.将 line-height 设置为当前 div 相同的高度, 再通过 vertical-align: middle.( 注意内容不要换行.)2).水平居中. margin: 0 auto;(当然不是万能)3,若需给 a 标签内内容加上样式, 需要设置 display: block;(常见于导航标签)4, FF 和 IE 对 BOX 理解的差异导致相差 2px 的还有设为 float的div在ie下 margin加倍等问题.5, ul 标签在 FF 下面默认有 list-style 和padding . 最好事先声明, 以避免不必要的麻烦. (常见于导航标签和内容列表)6, 作为外部 wrapper 的 div 不要定死高度, 最好还加上 overflow: hidden.以达到高度自适应.7, 关于手形光标. cursor: pointer. 而hand 只适用于 IE.兼容代码:兼容最推荐的模式。
CSS样式在浏览器常见的兼容问题及解决办法
一、IE6IE7Firef ox浏览器不兼容原因及解决办法1.文字本身的大小不兼容。
同样是fon t-size:14px的宋体文字，在不同浏览器下占的空间是不一样的，ie下实际占高16px，下留白3px，ff下实际占高17px，上留白1px，下留白3px，opera下就更不一样了。
解决方案：给文字设定 l ine-height 。
确保所有文字都有默认的 line-height 值。
这点很重要，在高度上我们不能容忍1p x 的差异。
2.ff 下容器高度限定，即容器定义了h eigh t之后，容器边框的外形就确定了，不会被内容撑大，而ie下是会被内容撑大，高度限定失效。
所以不要轻易给容器定义he ight。
3.还讨论内容撑破容器问题，横向上的。
如果floa t 容器未定义宽度，ff下内容会尽可能撑开容器宽度，i e下则会优先考虑内容折行。
故，内容可能撑破的浮动容器需要定义w i dth。
4.浮动的清除，ff下不清除浮动是不行的。
5.double-margin bug。
ie6下给浮动容器定义m argi n-left 或者marg in-right实际效果是数值的2倍。
解决方案，给浮动容器定义disp lay:inline。
6.mirror margi n bug，当外层元素内有floa t元素时，外层元素如定义marg in-top:14px，将自动生成margi n-bottom:14px。
paddin g也会出现类似问题，都是ie6下的特产，该类bug出现的情况较为复杂，远不只这一种出现条件，还没系统整理。
解决方案：外层元素设定b orde r 或设定floa t。
引申：ff 和ie 下对容器的m a rgin-bottom，paddin g-bottom的解释有时不一致，似乎与之相关。
解决Chrome谷歌浏览器不支持CSS设置小于12px的文字
解决Chrome谷歌浏览器不支持CSS设置小于12px的文字不支持小于12pxCSS样式名目问题分析谷歌扫瞄器支持font-size小字体办法解决所需CSS代码解决前后截图未解决前HTML+CSS代码截图解决后HTML+CSS代码截图把握说明1、谷歌扫瞄器不支持设置CSS较小字体问题分析 - TOP 网页经常为了排版美观，会用法忽大或小的文字，通常font-size文字为12px（像素）文字。
设置大于12px文字字体，各扫瞄器都能显示出CSS所设置文字大小效果。
但是CSS设置小于12px文字时候谷歌扫瞄器google Chrome就不能显示出CSS所设置小于12px的文字字体效果。
2、谷歌扫瞄器支持设置font-size小于12px像素解决办法 - TOP谷歌扫瞄器默认最小字体为12px，小于12px的字体它都以12px显示，有时我们需要字体小点，特殊是在制作英文网站时，经常用法CSS样式显示小于12px文字，这样谷歌扫瞄器就不能显示所设置较小的文字。
不过还是有解决计划的。
3、解决所需CSS代码 - TOP在html或者body里添加一句谷歌扫瞄器专有的内核属性样式（或者在需要设置小文字字体对象CSS挑选器添加也可）如下CSS代码：html,body{-webkit-text-size-adjust:none;}或.divcss5{-webkit-text-size-adjust:none;}注：假如用法了这个属性，扫瞄器的字体将不能用法放大缩小功能！（就是按住CTRL键上下滚动鼠标中键的那功能）尝试换单位-无用：还有伴侣说用em(字符)作为单位定义字体大小实用。
本人亲手测试过，用em字义的字体在谷歌扫瞄器中最小也不会小于12px。
所以是没用的。
临时我只知道上面一种办法4、设置小字体后扫瞄器对照图 - TOP谷歌扫瞄器关于font-size字体小于12像素对照图HTML+CSS代码前后局部代码截图：5、设置前HTML+CSS代码截图 - TOP6、设置CSS样式后DIV+CSS代码截图 - TOP7、把握与总结 - TOP谷歌扫瞄器Chrome是Webkit的内核，有一个-webkit-text-size-adjust 的私有 CSS 属性，通过它即可实现字体大小不随终端设备或扫瞄器影响。
CSS对浏览器器的兼容性具有很高的价值
CSS对浏览器器的兼容性具有很高的价值，通常情况下IE和Firefox存在很大的解析差异，这里介绍一下兼容要点。
常见兼容问题：1.DOCTYPE 影响 CSS 处理2.FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行3.FF: body 设置text-align 时, div 需要设置margin: auto(主要是margin-left,margin-right) 方可居中4.FF: 设置padding 后, div 会增加height 和width, 但IE 不会, 故需要用 !important 多设一个 height 和 width5.FF: 支持 !important, IE 则忽略, 可用 !important 为 FF 特别设置样式6.div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高line-height:200px; 然后插入文字，就垂直居中了缺点是要控制内容不要换行7.cursor: pointer 可以同时在 IE FF 中显示游标手指状， hand 仅 IE 可以8.FF: 链接加边框和背景色，需设置 display: block, 同时设置 float: left 保证不换行。
参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格。
9.在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法：div{margin:30px!important;margin:28px;}注意这两个margin的顺序一定不能写反，据阿捷的说法!important这个属性IE不能识别，但别的浏览器可以识别。
所以在IE下其实解释成这样：div{maring:30px;margin:28px}重复定义的话按照最后一个来执行，所以不可以只写margin:XXpx!important;10.IE5 和IE6的BOX解释不一致IE5下div{width:300px;margin:0 10px 0 10px;}div的宽度会被解释为300px-10px(右填充)-10px(左填充)最终div的宽度为280px，而在IE6和其他浏览器上宽度则是以300px+10px(右填充)+10px(左填充)=320px来计算的。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
在实际开发中，我们发现了UC浏览器对CSS存在一些“特殊照顾”：
∙不支持font-family属性，也就是说，在UC浏览器你只能看到一种字体；
∙不支持font-szie属性，也就是说，在UC浏览器你只能看到一样大小的字体；
∙不支持width、height、padding、margin、line-height属性，也就是说，在UC浏览器只能通过p、br等HTML标签来换行以达到字符上下间隔；
∙不支持固定像素的宽度，100%显示页面，也就是说，在UC浏览器始终将看到的是“满屏的”；
∙不支持浮动、层叠布局，float和position属性无效，也就是说，在UC 浏览器你只能看到“左对齐”。
∙支持background-color，但不支持background-image，也就是说不支持CSS背景图显示，在UC浏览器你只能看到背景色。
不过，个人仍然认为，如今建设小屏幕移动设备网页，完全可依据WebKit引擎的浏览器作为标准进行界面开发。
换句话说，我们设计支持UC浏览器的网页，而不是设计以UC浏览器为标准的网页。
这样做还有个好处，可以在大部分的手机浏览器上保证相对一致的样式。
而针对UC这种连float等标准CSS属性也不支持的浏览器，别过于纠结它！
但为了保证界面中各元素在UC浏览器仍具有良好的阅读顺序，严重建议HTML编码人员留意各个HTML标签的先后顺序。
因为只有在支持float、position属性的浏览器下，页面各个容器才可以任意浮动或层叠的。
否则，浏览器将按HTML标签的先后顺序显示。
另外一些小屏幕移动设备网页设计的相关补充：
∙网站头(header)
考虑到小屏幕移动设备的一些特性，设计网页时，有些可以去掉网站头（包括LOGO、全局导航什么的）。
比如flick的查看大图页面就去掉了网站头。
这里我自创了一句时髦的设计原则：“针对于小屏幕移动设备的界面设计，在某些指定任务的界面，应优先于让用户关注当前任务，而不是应用程序本身。
”这个原则是行得通的，同样适用于设计移动设备应用程序~
打个比方说，如果你在设计小屏幕移动设备访问的邮箱时，完全可以在写信、邮件阅读页去掉网站头~
∙链接聚焦（hover）
各个浏览器均自定义了链接的hover样式，比如有的浏览器给链接聚焦时加了边框，有的浏览器给链接聚焦时加个背景色之类。
因此小屏幕移动设备网页不需要在CSS中编写hover样式。
∙鼠标事件（mouseover）
考虑到触摸屏操作，用户无法用手指进行over的操作，因此应禁止在应
用于移动设备访问的网页使用mouseover。