本文主要包含css常见兼容性问题,css常见兼容问题,css浏览器兼容性问题,css兼容性问题,css兼容问题等相关知识,佚名 希望在学习及工作中可以帮助到您
目前主流浏览器的兼容性做的都比较好了，本文主要针对IE6，7的不兼容问题进行解决。
1.有浮动存在时，计算一定要精确，不要让内容的宽高超出我们所设置的宽高，IE6下，内容会撑开设置好的高度。
解决方法：给对应的父级加overflow:hidden;但是会有部分被隐藏掉，最好是精确计算宽高再设定
eg：（ie会撑开）
</div>- <style>
- box{ width:400px;}
- left{ width:200px;height:300px;background:red;float:left;}
- right{ width:200px;float:right;}
- div{width:180px;height:180px;background:blue;padding:15px;}
- *
- 计算一定要精确 不要让内容的宽高超出我们设置的宽高
- 在IE6下，内容会撑开设置好的宽高
- /
- </style>
- </head>
- <body>
- <div class="box">
- <div class="left"></div>
- <div class="right">
- <div class="div"></div>
- </div>
- </div>
- </body>
2. 在IE6下有元素浮动时，如果宽度需要由内容撑开，就给里边的块元素都加浮动，正常浏览器不用加浮动。
eg：
</div>- <style>
- box{ width:400px;}
- left{background:red;float:left;}
- right{float:right; background:blue;}
- h3{margin:0;height:30px; float:left;}
- /*
- 在IE6元素浮动，如果宽度需要内容撑开，就给里边的块元素都加浮动
- */
- </style>
- </head>
- <body>
- <div class="box">
- <div class="left">
- <h3>左侧</h3>
- </div>
- <div class="right">
- <h3>右侧</h3>
- </div>
- </div>
- </body>
3. 在IE6下元素的高度的小于19px的时候，会被当做19px来处理
解决办法：添加overflow:hidden;
4. 在IE6下border:1px dotted #000;中，dotted不支持，会以虚线的方式的出现。
解决方法：切背景平铺
5. 在所有浏览器中子元素的margin-top，margin-bottom值会传递给父级；
解决办法：
a：给父级都添加浮动（或者给子级添加浮动也能解决margin-top问题，但是margin左右值会出现双倍的值，也就是双边据bug问题，下面会讲）；
b：给父级添加position:relative;(或position:absolute;但是会脱离文档流)
c：添加display:inline-block; 正常浏览器，可行，但是IE,7下，块元素不支持display:inline-block;
d: 给附件添加border属性，例如border:1px solid red; 正常浏览器可行，在IE6下必须再给父级添加zoom:1;