兼容性总结

ε祈祈猫儿з 提交于 2020-04-05 16:31:23

写在前面的话,也不知道还要不要管ie6、7,晕晕乎乎的

1、h5兼容性

引用html5shiv.js

<script src="js/html5shiv.js"></script>

2、

1. 在IE6元素浮动,如果宽度需要内容撑开,就给里边的块元素都加浮动

例:

<div class="box">
    <div class="left">
        <h3>左侧</h3>
    </div>
    <div class="right">
        <h3>右侧</h3>
    </div>
</div>

给它设置css

.box{ width:200px;}
.left{background:red;float:left;}
.right{float:right; background:blue;}
h3{margin:0;height:30px;}
</style>

显示如下:

解决办法:

h3{margin:0;height:30px; float:left;}


-2 在IE6下元素要通过浮动并在同一行,就给这行元素都加浮动

例:

<div class="box">
    <div class="left"></div>
    <div class="right"></div>
</div>

样式

    .left{width:100px;height:100px;background:red; float:left;}
.right{width:200px;height:100px;background:blue;margin-left:100px;}
    

结果:

解决:都浮动


3- 注意标签嵌套规范

   <p> <h3></h3> </p>

样式

  <style>
   p{width:100px;height:100px;background:Red;}
  </style>

结果

- IE6下最小高度问题

在IE6下元素的高度的小于19px的时候,会被当做19px来处理
解决办法:`overflow:hidden;`

- 4在IE6下父级有边框的时候,子元素的margin值消失

 <div class="box">
        <div class="div"></div>
    </div>

样式

<style>
body{margin:0;}
.box{background:blue;border:1px solid #000;}
.div{width:200px;height:200px;background:red;margin:100px;}
</style>

结果

解决

在IE6下解决margin传递要触发haslayout

.box{background:blue;border:1px solid #000;zoom:1;}


5、css hack

针对不同的浏览器写不同的CSS 样式的过程,就叫CSS hack!

\9 ’ 所有的IE9及之前

+ ’ 和 ‘ * ’ IE7及ie7的ie浏览器认识

_IE6 ’及ie6的ie浏览器认识

例:

.box{ width:100px;height:100px;background:red;background:blue\9;      
      +background:yellow;_background:green;}
@media screen and (-webkit-min-device-pixel-ratio:0){.box{background:pink}}

6、html条件注释语句

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<!--[if IE]>
这是IE
<![endif]-->
<!--[if IE 9]>
9
<![endif]-->
<!--[if IE 8]>
8
<![endif]-->
<!--[if IE 7]>
7
<![endif]-->
<!--[if IE 6]>
6
<![endif]-->
</body>
</html>



本文转载于:猿2048兼容性总结

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!