# 浏览器兼容 https://blog.csdn.net/weixin_43638968/article/details/109177674 原因： 每个浏览器的css默认样式不尽相同 方案： **浏览器CSS样式初始化、浏览器私有属性，CSS hack语法和自动化插件。** * **-moz代表firefox浏览器私有属性** * **-ms代表IE浏览器私有属性** * **-webkit代表chrome、safari私有属性** * **-o代表opera私有属性** 自动化插件 --**Autoprefixer**是一款自动管理浏览器前缀的插件，它可以解析CSS文件并且添加浏览器前缀到CSS内容里。 CSS初始化 --- 引进库**Normalize.css** ## **渐近增强和优雅降级** 区别：优雅降级是从复杂的现状开始，并试图减少⽤户体验的供给，⽽渐进增强则是从⼀个非常基础的、能够起作⽤的版本开始，并不断扩充，以适应未来环境的需要。 低版本⽤户居多，则优先采⽤渐进增强的开发流程；若⾼版本⽤户居多，则为了提⾼⼤多数⽤户的使⽤体验，那当然优先采⽤优雅降级 ```css // 渐进增强 .transition{ -webkit-transition: all .5s; -moz-transition: all .5s; -o-transition: all .5s; transition: all .5s; } // 优雅降级 .transition{ transition: all .5s; -o-transition: all .5s; -moz-transition: all .5s; -webkit-transition: all .5s; } ``` # IE 浏览器兼容问题 * 1，不同浏览器的标签默认的margin和padding不同 解决办法： ~~~ body,h1,h2,h3,ul,li,input,div,span,a,form …… { margin:0; padding:0; } ~~~ * 2，块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大 解决方案：在float的标签样式控制中加入 display:inline;将其转化为行内属性 * 3，设置较小高度标签（一般小于10px），在IE6，IE7，遨游中高度超出自己设置高度 解决方案：给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。 * 4， 清除浮动： 解决方案：万能公式在float的父元素上使用 .abc:after {clear:both;content:'.';display:block;width: 0;height: 0;visibility:hidden;} * 5，IE浮动边缘产生的双倍距离 ~~~ #box { float:left; width:100px; margin:0 0 0 100px; //这种情况之下IE会产生200px的距离 display:inline; //使浮动忽略 } ~~~ * 6，透明度 ~~~ IE：filter：alpha（opacity = 10）; FF：不透明度：0.6; FF：-moz-opacity：0.10; 最好两个都写，并将透明度属性放在下面 ~~~ * 7，最小高度最小高度的实现（兼容IE6，IE7，FF） ~~~ #mrjin { background:#ccc; min-height:100px; height:auto !important; height:100px; overflow:visible; } ~~~ * 8，.IE6下在使用margin:0 auto;无法使其居中\*\* 解决办法：为其父容器设置**text-align:center;** * 9，被点击过后的超链接不再具有hover和active属性 解决办法:按lvha的顺序书写css样 ":**link**": a标签还未被访问的状态； ":**visited**": a标签已被访问过的状态； ":**hover**": 鼠标悬停在a标签上的状态； ":**active**": a标签被鼠标按着时的状态； * 10, IE6下无法设置1px的行高\*\*，原因是由其默认行高引起的 解决办法：为期设置**overflow:hidden;**或者**line-height:1px;** **1.不同浏览器的标签默认的外补丁和内补丁不同** 问题症状：随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。 解决方案：CSS里    \*{margin:0;padding:0;} ### 2.IE6双边距问题：IE6在浮动后，又有横向的margin，此时，该元素的外边距是其值的2倍   解决办法：display:block; ### 3.IE6下图片的下方有空隙  解决方法：给img设置display:block; 使用float属性为img布局——因为img标签是行内属性标签，所以只要不超出容器宽度，img标签都会排在一行里，但是部分浏览器的img标签之间会有个间距。去掉这个间距使用float是正道