小花带你一周入门html+css（六）CSS进阶之兼容性与滤镜丨【WEB前端大作战】

今天我们来了解一下CSS进阶之兼容性与滤镜

常见兼容性问题及解决、滤镜效果等

CSS看似比较繁杂，其实只要掌握了CSS中的盒子模型、定位、以及页面布局，就基本上掌握了大半啦~这时我们就已经能够对网页中各个元素进行精准的排版，做出符合我们意愿的网页啦！

关于CSS的各种属性，我们还是可以参考学习HTML那样。可以说CSS的属性几乎完全是语义化的。我们需要改变边框，那就是“border”，那我们需要右侧边框做一些改变，那就是“border-right”。很明显，接下来按照我们的需求还有“右边框的宽度——border-right-with”，”右边框颜色——border-right-color”等等等，诸如此类~

完全就是我们需要什么，只要凭着需求去寻找。~follow me~

常见兼容性问题及解决

由于小花现在的工作环境有些电脑还是有ie6、ie7的 之前的一些老系统还是要兼容ie8以下版本的。不过好在这两年的系统对ie已经不做强制性要求。所以可以和ie8以下版本说拜拜┏(＾0＾)┛是挺开心的。

下面看一下这些年小花常见的十一种踩坑填坑笔记

首先看一下**兼容不同ie版本的字符

写法

/*类内部hack：*/ .header {_width:100px;} /* IE6专用*/ .header {*+width:100px;} /* IE7专用*/ .header {*width:100px;} /* IE6、IE7共用*/ .header {width:100px\0;} /* IE8、IE9共用*/ .header {width:100px\9;} /* IE6、IE7、IE8、IE9共用*/ .header {width:330px\9\0;} /* IE9专用*/ /*选择器Hack：*/ *html .header{} /*IE6*/ *+html .header{} /*IE7*/

设置ie文档模式

例如

可以设置浏览器使用的文档模式为7

默认的文档模式为11（Edge），10，9依次降低。

1.important的兼容性

在ie6等低版本浏览器中，后面这个属性值会顶替前面那个属性值

2.盒子的尺寸问题（padding和width问题）

具体可以参考之前的文章小花带你一周入门html+css（四）CSS进阶之盒子模型与文档流丨【WEB前端大作战】

关于前端的碎碎念2-CSS装修之盒子模型

w3c标准中

盒子的实际宽度 =padding+ border + 实体化width

需要：宽高基础之上减去相应的padding和border值

ie6等低版本浏览器中

盒子的宽度 = 实体化的width

需要：宽高基础之上加上相应的padding和border值

注意：如果padding的值过大，超过盒子width的一半，那么同样能够看到盒子变大的现场，因为padding值撑起了盒子。

解决方案：

用ie6的特殊字符解决，

即 用一个正常的width值，在用一个针对ie6的width值，并且放后面

例如：

.box{ width:500px; _width:530px; padding:0 15px; }

3.overflow清除浮动兼容

给浮动的元素父级增加overflow:hidden;_zoom:1;清除浮动

4.文本框text和按钮button对齐问题-在不同的浏览器中显示效果不同

出现这个兼容情况的条件：

text和button同时出现

button按钮没有value值，只有一个小图标代替

使用浮动解决

给text增加float:left属性

5.ie6双边距问题

当外边距方向和浮动方向相同，在ie6浏览器中，一定会出现双倍边距问题

解决方法：在出现问题的盒子上加_display:inline;

6.图片链接在ie10及以下中有边框

图片链接，而且链接必须有href属性

解决方案

给img增加border:0;或者border:none;属性

我们可以在清除标签的默认样式时加入border:none;

7.ie9及以下图片img底部留白问题

书写不规范

div里面嵌套img标签，而且img后面有一个空格，或者img标签写完之后换行，会出现底部留空问题

注：在html中，换行被浏览器解析成一个空格。

解决方法：

给div一个高度，并且用overflow:hidden减去多余部分

给img加display:block;

给div增加font-size:0; 因为空格也是一个字符，设置font-size:0;可以使字符消失

8.ie6空盒子最低高度为19px

一个不放任何内容的空盒子，即使设置盒子的高度小于19px，ie6会默认解析为19px；

-给盒子加overflow:hidden;

span{ width:10px; height:10px; background:url(xxx.jpg); overflow:hidden; }

-给backgorund加设置不平铺

tips：我们在工作中，只要盒子的背景不平铺，那我们就主动的去添加no-repeat;

span{ width:10px; height:10px; background:url(icon.jpg) no-repeat; }

-给span标签设置line-height:0;font-size:0;

span{ width:10px; height:10px; background:url(xxx.jpg); line-height:0; font-size:0; }

9.Ie6下，不识别最大宽、高度和最小宽高度，意即min-width/height和 max-width/height在ie6中没效果

解决方法：

.box{ border:1px blue solid; width:200px; height:200px; } html>body .box{ width:auto; height:auto; min-width:200px; min-height:200px; }

或者

.box{ width:200px; height:200px; _width:200px; _height:200px; }

因为ie6有一个特征，当定义一个高度时，如果内容超过高度，元素会自动调整高度。

10.ie6 不支持 fixed

/*对于非IE6可以这样写*/ #top{ position:fixed; bottom:0; right:20px; } /*但是IE6是不支持fixed定位的，需要另外重写*/ #top{ position:fixed; _position:absolute; top:0; right:20px; _bottom:auto; _top:expression(eval(document.documentElement.scrollTop)); } /*使用hack使IE6实现该效果，但这个东东会闪烁，需要以下代码*/ *html{ background-image:url(about:blank); background-attachment:fixed; } /*使固定在顶部*/ #top{ _position:absolute; _bottom:auto; _top:expression(eval(document.documentElement.scrollTop)); } /*固定在底部*/ #top{ _position:absolute; _bottom:auto; _top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop)||0)-(parseInt(this.currentStyle.marginBottom)||0))); } /*垂直居中*/ #top{ position:fixed; top:50%; margin-top:-50px; _position:absolute; _top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight/2)); }

11.解决 ie6 最大、最小宽高 hack方法

/* 最小宽度 */ .min_width{ min-width:300px; _width:expression(parseInt(this.clientWidth) < 300 ? "300px" : this.clientWidth); } /* 最大宽度 */ .max_width{ max-width:600px; _width:expression(parseInt(this.clientWidth) > 600 ? "600px" : this.clientWidth); } /* 最小高度 */ .min_height{ min-height:200px; _height:expression(parseInt(this.clientHeight) < 200 ? "200px" : this.clientHeight); } /* 最大高度 */ .max_height{ max-height:400px; _height:expression(parseInt(this.clientHeight) > 400 ? "400px" : this.clientHeight); }

滤镜效果opacity

CSS 透明算得上是一种相当流行的技术，但在跨浏览器支持上，对于开发者来说，可以说是一件令人头疼的事情。目前还没有一个通用方法，以确保透明度设置可以在目前使用的所有浏览器上有效，但是总得来说它是一个巨大的变革。关于 CSS 透明度，有一点需要注意的是，它虽然使用了很多年，但它一直以来都不是一个标准属性，它是一种非标准技术，应该是 CSS3 规范的一部分。

opacity定义元素的不透明度

filter：alpha（opacity=80）；/*ie支持该属性*/   opacity：0.8；/*支持css3的浏览器*/

我们做个透明效果的例子来了解一下

华为云鲲鹏云服务与解决方案

background:#000;

filter:alpha(opacity=60);

opacity:0.6;

为关键代码，当 opacity 值为1时，表示完全不透明，为0时表示完全透明。

opacity: 0.3；这是“最重要的”，因为它是在 CSS 的现行标准。这将在 Firefox，Safari 和 Opera 的大多数版本的工作。这将是你所需要的一切如果所有的浏览器都支持目前的标准。当然是他们不会错。

filter:alpha(opacity=30);这一个是针对IE浏览器

-moz-opacity:0.3;你需要这一个支持老版本的 Mozilla 浏览器如 Netscape Navigator。

-khtml-opacity: 0.3;这是旧版本的 Safari（1.×）当渲染引擎是使用仍被称为 kthml，而不是目前的WebKit。

.transparent_class { filter:alpha(opacity=50);//标准的css透明度，在大部分的标准浏览器Firefox, Safari, and Opera都有效 opacity:0.5;//兼容IE解决方案 -moz-opacity:0.5;//老的Mozilla browsers如NetscapeNavigator.几乎没有可以不需要 -khtml-opacity:0.5;//兼容老的Safari (1.x) 版本,很少可以不用 }

tips学习小技巧:

学习前端需要方法，更需要一颗平常心，不要把前端想的多难，需要吃什么苦。。。既然学习这么痛苦，为什么不快乐一点学呢？anyway~希望大家可以成为一个优秀的前端！资历有限，错误难免，欢迎大力指正。

【WEB前端大作战】火热进行中：https://bbs.huaweicloud.com/blogs/255890

CSS HTML web前端

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。