12.兼容性问题（下）

最新推荐文章于 2022-03-28 21:06:50 发布

无足舞者

最新推荐文章于 2022-03-28 21:06:50 发布

阅读量196

点赞数

分类专栏：前端工程师【基础篇】文章标签：浏览器兼容性 IE兼容性布局网页布局 div布局

本文链接：https://blog.csdn.net/u010567918/article/details/79279790

版权

前端工程师【基础篇】专栏收录该内容

14 篇文章 0 订阅

订阅专栏

兼容性问题

条件注释

简介

1. 条件注释语句是IE浏览器专属的，但IE10版本以上就去掉了此功能。

2. 可以根据条件来判断注释是否执行。

用法一

代码

<!DOCTYPE html>

<html>

<head>

<title>兼容性问题</title>

</head>

<body>

<!--[if IE]>

这是IE

<![endif]-->

</body>

</html>

效果

IE10

IE9,8,7…

标准浏览器

用法二

代码

<!DOCTYPE html>

<html>

<head>

<title>兼容性问题</title>

</head>

<body>

<!--[if IE 9]>

这是IE9

<![endif]-->

<!--[if IE 8]>

这是IE8

<![endif]-->

<!--[if IE 5]>

这是IE5

<![endif]-->

</body>

</html>

效果

IE9

IE8

IE7

IE5

标准浏览器

CSS hack（CSS解析控制）

简介

1. 简单的说，CSS hack的目的就是使你的CSS代码兼容不同的浏览器。当然，我们也可以反过来利用CSS hack为不同版本的浏览器定制编写不同的CSS效果。

a) 通过前面的学习我们已经知道，兼容性我们已经有很多解决方式，开发中一般不会使用css hack来解决兼容性问题的。

2. 不建议使用css hack , 一句话“远离css hack，有益身心健康！” 。

a) 用css hack不方便维护，各种不好，所以一般工作中不建议使用，有的公司甚至明文禁止。

3. IE10以下版本支持css hack，IE11以上不支持（包含）。

常见CSS hack举例

IE的

1. “\9” ： IE10（含IE10）之前的IE浏览器解析。

a) 用法：加在样式属性值后面（如：“background:blue\9;”）。

2. “*”和“+” ： IE7（含IE7）之前的IE浏览器解析。

a) 用法：加在样式属性前面（如：“+background:red;”、“*background:red;”）。

3. “_” : IE6（含IE6）之前的IE浏览器解析。

a) 用法：加在样式属性前面（如：“_background:red;”）。

Chrome

1. @media screen and (-webkit-min-device-pixel-ratio:0){body{background-color:pink;}}

a) 网页主体背景在谷歌浏览器下显示为粉色，其他浏览器则不起效果。

范例

代码

<!DOCTYPE html>

<html>

<head>

<title>兼容性问题</title>

<style>

.box{width:200px;height:200px;background:red;background:blue\9;}

</style>

</head>

<body>

</body>

</html>

效果

IE11

IE10

小结

1. 上面“代码”中我们为box元素指定了两个背景，按照语法规则，后一个蓝色背景会覆盖前面的红色背景，但我们用了IE下的css hack（即：“ \9 ”），标准浏览器和IE11以上的浏览器不支持此css hack，所以都认为是错误的样式属性而不解析，自然也就没覆盖成蓝色了。但IE10以下版本的IE浏览器则支持，所以蓝色覆盖了红色。

IE6不支持图片png

问题

描述

1. 我们之前学过，一般web图片格式有四种jpg、gif、png8、png24，其中只有png24支持半透明，当我们页面要用到半透明，就必须用到png24，但要命的是IE6根本不支持png。

代码

<!DOCTYPE html>

<html>

<head>

<title>兼容性问题</title>

<style>

body{background:black;}

.box{width:200px;height:200px;background:url(bgtm.png);}

</style>

</head>

<body>

</body>

</html>

效果

标准浏览器

IE6

素材

1. bgtm.png

方式一（推荐）

解决（js）

思路

1. 使用老外编写的一个javascript脚本“DD_belatedPNG_0.0.8a.js” 。

代码

<!DOCTYPE html>

<html>

<head>

<title>兼容性问题</title>

<style>

body{background:black;}

.box{width:200px;height:200px;background:url(bgtm.png);}

</style>

<script src="DD_belatedPNG_0.0.8a.js"></script>

<script>

DD_belatedPNG.fix('.box'); //以选择器为参数，这里选中box元素

</script>

</head>

<body>

</body>

</html>

效果

标准浏览器

IE6

Js插件

1. DD_belatedPNG_0.0.8a.js

a) 网上有很多下载

b) 账号为“1220017773@qq.com”的百度云下“我的网盘/PLF开发智库/PLF参考笔记”目录下有此插件。这里作为读者的您只能去网上下载了，小潘潘无法提供嘿嘿~

优化

问题

1. 上面的解决方式还是存在问题，使用了“DD_belatedPNG_0.0.8a.js”后，IE6下的确支持了png图片，但这样做在别的浏览器下会报js错（如：IE8），那么这样肯定是不行的，这里我们就可以用IE下专属的“条件注释”来解决。

代码

<!DOCTYPE html>

<html>

<head>

<title>兼容性问题</title>

<style>

body{background:black;}

.box{width:200px;height:200px;background:url(bgtm.png);}

</style>

<!--[if IE 6]>

DD_belatedPNG.fix('.box'); //以选择器为参数，这里选中box元素

</script>

<![endif]-->

</head>

<body>

</body>

</html>

方式二

思路

1. 使用滤镜

代码

<!DOCTYPE html>

<html>

<head>

<title>兼容性问题</title>

<style>

body{background:black;}

.box{width:200px;height:200px;background:url(bgtm.png);_background:none;/* "_" css hack IE6之前解析 */

_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="img/png.png", sizingMethod="crop");}

</style>

</head>

<body>

</body>

</html>

小结

1. 缺点

a) 没办法设置背景图片的位置。

b) 没办法设置平铺。

c) 要结合“_background:none;”一起使用。

！important

简介

作用

1. “!important”提升样式优先级权重。

样式优先级

1. 默认 < 类型（元素） < class（类） < id < style（行间） < important

范例一

代码

<!DOCTYPE html>

<html>

<head>

<title>兼容性问题</title>

<style>

.box{width:200px;height:200px;background:red !important;}

</style>

</head>

<body>

</body>

</html>

效果

所有浏览器

范例二（IE6下的兼容性问题）

问题

描述

1. 在IE6下，在important后边加一条同样的样式，会破坏掉important的作用，结果会按照默认的优先级顺序来走。

代码

<!DOCTYPE html>

<html>

<head>

<title>兼容性问题</title>

<style>

.box{width:200px;height:200px;background:red !important;background:green;}

</style>

</head>

<body>

</body>

</html>

效果

IE6以外的浏览器

IE6

解决

1. 避免在important后边加一条同样的样式即可。

IE6下margin负值

问题

描述

1. 在IE6下，margin值为负数时，使元素超出了父级的边界，那么超出的部分会被父级截掉。

范例

范例一（正数）

代码

<!DOCTYPE html>

<html>

<head>

<title>兼容性问题</title>

<style>

.box{float:left;border:5px solid black;margin:20px;

display:inline;} /* 去掉IE6下双边距bug */

.box div{width:100px;height:100px;background:red;}

.div1{margin-top:30px;} /*温习：子元素margin-top会传递给父元素，但父元素使用了浮动即不会出现传递了*/

.div2{margin-right:30px;}

.div3{margin-bottom:30px;}

.div4{margin-left:30px;}

</style>

</head>

<body>

</div>

</div>

</div>

</div>

</body>

</html>

效果

标准浏览器

IE6

小结

1. 当margin值为正数时，没有兼容性问题。

范例二（负数）

代码

<!DOCTYPE html>

<html>

<head>

<title>兼容性问题</title>

<style>

.box{float:left;border:5px solid black;margin:20px;

display:inline;} /* 去掉IE6下双边距bug */

.box div{width:100px;height:100px;background:red;}

.div1{margin-top:-30px;}

.div2{margin-right:-30px;}

.div3{margin-bottom:-30px;}

.div4{margin-left:-30px;}

</style>

</head>

<body>

</div>

</div>

</div>

</div>

</body>

</html>

效果

标准浏览器

IE6

小结

1. 在IE6下，margin值为负数时，使元素超出了父级的边界，那么超出的部分会被父级截掉。

解决

思路

1. 只需要给子元素添加一个相对定位就解决了。

代码

原代码

1. .box div{width:100px;height:100px;background:red;}

修改后

1. .box div{width:100px;height:100px;background:red;position:relative;}

特殊布局

圣杯布局（双飞翼布局）

简介

描述

1. 左右宽度固定，中间宽度自适应伸缩，并且中间先加载。

范例

代码

<!DOCTYPE html>

<html>

<head>

<style>

body{margin:0;}

.center{height:800px;background:red;

margin:0 200px;}/* 块元素不指定宽默认会自适应占满整行，使用外边距使其左右空出 */

.left{height:800px;width:200px;background:green;

position:absolute;left:0;top:0;}/* 直接使用绝对定位脱离文档流拉倒左侧顶部 */

.right{height:800px;width:200px;background:blue;

position:absolute;right:0;top:0;}/* 直接使用绝对定位脱离文档流拉倒右侧顶部 */

</style>

</head>

<body>

<div class="center"></div> 

</body>

</html>

效果

随机改变浏览器窗口大小1

随机改变浏览器窗口大小2

总结

1. 网上有很多圣杯布局代码，大多实现起来很复杂很麻烦，其实完全没有必要，只不过在面试的时候可以把面试官说晕，让面试官感觉很吊的样子而已。（小潘潘面试一般都找复杂说嘿嘿~）

等高布局

简介

描述

1. 左右两列高度自适应扩展，并且相等。

要求

描述

1. 希望左右两边同步等高。

代码

<!DOCTYPE html>

<html>

<head>

<style>

.wrap{width:900px;margin:0 auto;

overflow:hidden;}/* 清浮动 */

.left{width:200px;background:red;float:left;}

.right{width:700px;background:green;float:right;}

</style>

</head>

<body>

页面内容<br/>

</div>

</div>

</body>

</html>

效果

解决

思路

1. 其实就是利用简单的障眼法来实现。

代码

<!DOCTYPE html>

<html>

<head>

<style>

.wrap{width:900px;margin:0 auto;

overflow:hidden;}/* 清浮动 */

.left{width:200px;background:red;float:left;

padding-bottom:10000px;margin-bottom:-10000px;}

.right{width:700px;background:green;float:right;

padding-bottom:10000px;margin-bottom:-10000px;}

</style>

</head>

<body>

页面内容<br/>

</div>

页面内容<br/>

</div>

</body>

</html>

效果

实现原理

过程1

代码

<!DOCTYPE html>

<html>

<head>

<style>

body{margin:0;}

.wrap{width:900px; margin:0 auto;border:10px solid black;}

/* 清浮动，父级有宽度不需要加"zoom:1" */

.wrap:after{content:"";display:block;clear:both;}

.left{width:200px;background:red;float:left;}

.right{width:200px;background:green;float:right;}

</style>

</head>

<body>

</div>

</body>

</html>

效果

过程2

代码

<!DOCTYPE html>

<html>

<head>

<style>

body{margin:0;}

.wrap{width:900px; margin:0 auto;border:10px solid black;}

/* 清浮动，父级有宽度不需要加"zoom:1" */

.wrap:after{content:"";display:block;clear:both;}

.left{width:200px;background:red;float:left;

padding-bottom:200px;} /* 添加200px的下内边距 */

.right{width:200px;background:green;float:right;

padding-bottom:200px;} /* 添加200px的下内边距 */

</style>

</head>

<body>

</div>

</body>

</html>

效果

过程3

代码

<!DOCTYPE html>

<html>

<head>

<style>

body{margin:0;}

.wrap{width:900px; margin:0 auto;border:10px solid black;}

/* 清浮动，父级有宽度不需要加"zoom:1" */

.wrap:after{content:"";display:block;clear:both;}

.left{width:200px;background:red;float:left;

"padding-bottom:200px"使left元素本身有了200px的内填充，

我们又为left父级添加了清浮动，加上父级元素wrap也没有指定高度，

这时父级高度会由子级元素撑开，所以wrap元素也就会被撑开200px的高。

"margin-bottom:-200px"使left元素在left元素父级元素中减少

了200px的占用（上面"兼容性问题"中的"IE6下margin负值"已经讲解过）。

padding-bottom:200px;

margin-bottom:-200px;}

.right{width:200px;background:green;float:right;

padding-bottom:200px;

margin-bottom:-200px;}

</style>

</head>

<body>

</div>

</body>

</html>

效果

过程4

代码

<!DOCTYPE html>

<html>

<head>

<style>

body{margin:0;}

.wrap{width:900px; margin:0 auto;border:10px solid black;}

/* 清浮动，父级有宽度不需要加"zoom:1" */

.wrap:after{content:"";display:block;clear:both;}

.left{width:200px;background:red;float:left;

"padding-bottom:200px"使left元素本身有了200px的内填充，

我们又为left父级添加了清浮动，加上父级元素wrap也没有指定高度，

这时父级高度会由子级元素撑开，所以wrap元素也就会被撑开200px的高。

"margin-bottom:-200px"使left元素在left元素父级元素中减少

了200px的占用（上面"兼容性问题"中的"IE6下margin负值"已经讲解过）。

padding-bottom:200px;

margin-bottom:-200px;}

.right{width:200px;background:green;float:right;

padding-bottom:200px;

margin-bottom:-200px;}

</style>

</head>

<body>

页面内容<br/>

</div>

</div>

</body>

</html>

效果

过程5

代码

<!DOCTYPE html>

<html>

<head>

<style>

body{margin:0;}

.wrap{width:900px; margin:0 auto;border:10px solid black;overflow:hidden;}

/* 清浮动，父级有宽度不需要加"zoom:1" */

.wrap:after{content:"";display:block;clear:both;}

.left{width:200px;background:red;float:left;

"padding-bottom:200px"使left元素本身有了200px的内填充，

我们又为left父级添加了清浮动，加上父级元素wrap也没有指定高度，

这时父级高度会由子级元素撑开，所以wrap元素也就会被撑开200px的高。

"margin-bottom:-200px"使left元素在left元素父级元素中减少

了200px的占用（上面"兼容性问题"中的"IE6下margin负值"已经讲解过）。

padding-bottom:200px;

margin-bottom:-200px;}

.right{width:200px;background:green;float:right;

padding-bottom:200px;

margin-bottom:-200px;}

</style>

</head>

<body>

页面内容<br/>

</div>

</div>

</body>

</html>

效果

其他布局

最近还流行一些别的布局，如视觉差布局、瀑布流布局、响应式布局这些单凭css2已经实现不了了，所以就不介绍了

无足舞者

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
12.兼容性问题（下）

兼容性问题条件注释简介1. 条件注释语句是IE浏览器专属的，但IE10版本以上就去掉了此功能。2. 可以根据条件来判断注释是否执行。用法一代码兼容性问题这是IE 效果IE10 IE9,8,7… 标准浏览器用法二代码
复制链接

扫一扫

专栏目录