小花带你一周入门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文档模式
例如
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
可以设置浏览器使用的文档模式为7
<meta http-equiv="X-UA-Compatible" content="IE=Edge，10，9">
默认的文档模式为11（Edge），10，9依次降低。
1.important的兼容性
在ie6等低版本浏览器中，后面这个属性值会顶替前面那个属性值
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>css兼容性</title>
<style type="text/css">
div{width:100px;height:100px;}
#pink{background:pink;}
.red{background:red;}
div{background:#eee!important; background:#FC6;}
</style>
</head>
<body>
<div class="red" id="pink" style="background:green;">
!important 兼容性
</div>
</body>
</html>
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;清除浮动
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>css兼容性</title>
<style type="text/css">
*{margin:0;padding:0}
.box1{overflow:hidden;_zoom:1;}
.box2,.box3{width:100px;height:100px;float:left;background:pink;}
.box4{width:200px;height:120px;background:#FC0;}
.clearfix{clear:both;}
</style>
</head>
<body>
<div class="box1">
<div class="box2">box2</div>
<div class="box3">box3</div>
</div>
<div class="box4">box4</div>
</body>
</html>
4.文本框text和按钮button对齐问题-在不同的浏览器中显示效果不同
出现这个兼容情况的条件：
text和button同时出现
button按钮没有value值，只有一个小图标代替
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>css兼容性</title>
<style type="text/css">
*{margin:0;padding:0;list-style:none;border:0;}
.search{ width:199px; height:32px;margin:50px auto;}
.txt{width:160px;height:32px;background:#eee;color:#acacac;padding-left:6px;}
.btn{ width:33px; height:32px; background:#c7000b;}
</style>
</head>
<body>
<div class="search">
<input type="text" class="txt" /><input type="button" class="btn" />
</div>
</body>
</html>
使用浮动解决
给text增加float:left属性
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>css兼容性</title>
<style type="text/css">
*{margin:0;padding:0;list-style:none;border:0;}
.search{ width:199px; height:32px;margin:50px auto;}
.txt{width:160px;height:32px;background:#eee;color:#acacac;padding-left:6px;float:left}
.btn{ width:33px; height:32px; background:#c7000b;}
</style>
</head>
<body>
<div class="search">
<input type="text" class="txt" /><input type="button" class="btn" />
</div>
</body>
</html>
5.ie6双边距问题
当外边距方向和浮动方向相同，在ie6浏览器中，一定会出现双倍边距问题
解决方法：在出现问题的盒子上加_display:inline;
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>css兼容性</title>
<style type="text/css">
*{margin:0;padding:0;list-style:none;border:0;}
.box{width:100px;height:100px;background:#c7000b;float:left;margin-left:50px;_display:inline;}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
6.图片链接在ie10及以下中有边框
图片链接，而且链接必须有href属性
解决方案
给img增加border:0;或者border:none;属性
我们可以在清除标签的默认样式时加入border:none;
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>css兼容性</title>
<style type="text/css">
body,div,a,img,span,p,h1,h2,h3,h4,h5,h6,ul,li,ol,dl,dt,dd,input{margin:0; padding:0; list-style:none; border:none;}
</style>
</head>
<body>
<a href="#"><img src="https://res.devcloud.huaweicloud.com/obsdevui/diploma/9.1.10.002/banner-2.64b1407e7a8db89d6cf2.jpg"/></a>
</body>
</html>
7.ie9及以下图片img底部留白问题
书写不规范
div里面嵌套img标签，而且img后面有一个空格，或者img标签写完之后换行，会出现底部留空问题
注：在html中，换行被浏览器解析成一个空格。
解决方法：
- 给div一个高度，并且用
overflow:hidden减去多余部分 - 给img加
display:block; - 给div增加
font-size:0;因为空格也是一个字符，设置font-size:0;可以使字符消失
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>css兼容性</title>
<style type="text/css">
body,div,a,img,span,p,h1,h2,h3,h4,h5,h6,ul,li,ol,dl,dt,dd,input{margin:0; padding:0; list-style:none; border:none;}
.box{background:#c7000b;font-size:0px}
</style>
</head>
<body>
<div class="box">
<a href="#"><img src="https://res.devcloud.huaweicloud.com/obsdevui/diploma/9.1.10.002/banner-2.64b1407e7a8db89d6cf2.jpg"/></a>
</div>
</body>
</html>
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的浏览器*/
我们做个透明效果的例子来了解一下
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>css兼容性</title>
<style type="text/css">
body,div,a,img,span,p,h1,h2,h3,h4,h5,h6,ul,li,ol,dl,dt,dd,input{margin:0; padding:0; list-style:none; border:none;}
*{ margin:0; padding:0; list-style:none; border:0;}
.main{ width:750px; height:422px; margin:100px auto; border-radius: 6px;position:relative;}
.main .bg{ width:100%; height:44px; position:absolute; left:0; bottom:0; background:#000; filter:alpha(opacity=60); opacity:0.6;}
.con{ width:100%; position:absolute; left:0; bottom:0; color:#fff; padding:10px; font-size:18px;text-align:center; line-height:20px;}
</style>
</head>
<body>
<div class="main">
<img src="https://res.devcloud.huaweicloud.com/obsdevui/diploma/9.1.10.002/free-course1.07596a5039c41e6fa1f9.png" width="750" height="422" />
<p class="bg"></p>
<p class="con"> 华为云鲲鹏云服务与解决方案</p>
</div>
</body>
</html>
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
- 点赞
- 收藏
- 关注作者
评论（0）