总结css兼容问题

目前主流浏览器的兼容性做的都比较好了，本文主要针对IE6，7的不兼容问题进行解决。

1.有浮动存在时，计算一定要精确，不要让内容的宽高超出我们所设置的宽高，IE6下，内容会撑开设置好的高度。

　　解决方法：给对应的父级加overflow:hidden;但是会有部分被隐藏掉，最好是精确计算宽高再设定

eg：（ie会撑开）

 <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：

 <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;

eg:

 <style>

 body{margin:0;}

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

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

 /*

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

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

     解决办法:触发父级的haslayout

 */

 </style>

 </head>

 <body>

 <div class="box">

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

 </div>

 </body>

6. 在IE6下，块元素有浮动和和横向的margin值，横向的margin值会被放大成两倍。

　　解决办法：添加display:inline;

 <style>

 .box{ float:left;border:10px solid #000;}

 .box div{width:100px;height:100px;background:Red;margin-right:20px;border:5px solid #ccc; float:left;}

 /*

     margin-right 一行右侧第一个元素有双边距

     margin-left 一行左侧第一个元素有双边距

 */

 </style>

 </head>

 <body>

 <div class="box">

     <div>1</div>

     <div>2</div>

     <div>3</div>

     <div>4</div>

 </div>

 </body>

7. 在IE6，7下，li自身没浮动，但是li的内容有浮动，li下边就会产生一个间隙

　　解决办法：1.给li加浮动
　　　　 2.给li加vertical-align;

注意：当IE6下最小高度问题，和 li的间隙问题共存的时候，给li加浮动才能解决。

eg:

 <style>

 ul{margin:0;padding:0;width:302px;}

 li{ list-style:none;height:30px;border:1px solid #000; vertical-align:top;}

 a{width:100px;float:left;height:30px;background:Red;}

 span{width:100px;float:right;height:30px;background:blue;}

 /*

     在IE6，7下，li本身没浮动，但是li的内容有浮动，li下边就会产生一个间隙

     解决办法:

         1.给li加浮动

         2.给li加vertical-align

 */

 </style>

 </head>

 <body>

 <ul>

     <li>

         <a href="#"></a>

         <span></span>

     </li>

     <li>

         <a href="#"></a>

         <span></span>

     </li>

     <li>

         <a href="#"></a>

         <span></span>

     </li>

 </ul>

 </body>

8.当一行子元素占有的宽度之和和父级的宽度相差超过3px,或者有不满行状态的时候,最后一行子元素的下margin在IE6下就会失效

　　解决方法：额，还没发现

eg：

 <style>

 .box{border:10px solid #000;width:600px; /* width:603px; */ overflow:hidden;}

 .box div{width:100px;height:100px;background:Red;margin:20px;border:5px solid #ccc; float:left; display:inline;}

 /*

     当一行子元素占有的宽度之和和父级的宽度相差超过3px,或者有不满行状态的时候,最后一行子元素的下margin在IE6下就会失效

 */

 </style>

 </head>

 <body>

 <div class="box">

     <div>1</div>

     <div>2</div>

     <div>3</div>

     <div>4</div>

     <div>1</div>

     <div>2</div>

     <div>3</div>

     <div>4</div>

     <div>1</div>

     <div>2</div>

     <div>3</div>

     <!-- <div>4</div> -->

 </div>

9. 在IE6下的文字溢出BUG。即：子元素的宽度和父级的宽度相差小于3px的时候,或者两个浮动元素中间有注释或者内嵌元素的时候，IE6下文字溢出

解决办法:用div把注释或者内嵌元素用div包起来。

eg：

 <style>

 .box{ width:400px;}

 .left{float:left;}

 .right{width:400px;float:right;}

 </style>

 </head>

 <body>

 <div class="box">

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

     <!-- IE6下的文字溢出BUG --><span></span>

     <div class="right">&darr;哈哈哈哈哈哈哈哈哈哈</div>

 </div>

 <!--

     在IE6下的文字溢出BUG

     子元素的宽度和父级的宽度相差小于3px的时候,两个浮动元素中间有注释或者内嵌元素

     解决办法:用div把注释或者内嵌元素用div包起来

 -->

 </body>

10. 当浮动元素和绝对定位元素是并列关系的时候，在IE6下绝对定位元素会消失。
解决办法: 给定位元素外面包个div。

eg：

 <style>

 .box{ width:200px;height:200px;border:1px solid #000; position:relative;}

 span{width:50px;height:50px;background:yellow; position:absolute;right:-20px;top:0;}

 ul{width:150px;height:150px;background:Red;margin:0 0 0 50px;padding:0; float:left; display:inline;}

 /*

     当浮动元素和绝对定位元素是并列关系的时候，在IE6下绝对定位元素会消失

     解决办法:

         给定位元素外面包个div

 */

 </style>

 </head>

 <body>

 <div class="box">

     <ul></ul>

     <span></span>

 </div>

11. 在IE6，7下，子元素有相对定位的话，父级的overflow包不住子元素。

　　 解决办法: 给父级也加相对定位 position:relative;。

eg：

 <style>

 .box{ width:200px;height:200px;border:1px solid #000; overflow:hidden; /*  position:relative; */ }

 .div{ width:150px;height:300px;background:yellow; position:relative;}

 /*

     在IE6，7下，子元素有相对定位的话，父级的overflow包不住子元素

     解决办法: 给父级也加相对定位position:relative;

 */

 </style>

 </head>

 <body>

 <div class="box">

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

 </div>

 </body>

12. 在IE6下绝对定位元素的父级宽高是奇数的时候，元素的right值和bottom值会有1px的偏差.

　　解决办法: 尽量用偶数，还没发现别的方法。

13. 在IE6下，position：fixed; 是没有效果的。

　　解决方法：用js来控制吧。。。

 <style>

 body{height:1000px;margin:0;}

 .box{width:100px;height:100px;background:Red; position:fixed;left:50px;bottom:150px;

     _position:absolute;

     _bottom:auto;

     _top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,0)||0)-(parseInt(this.currentStyle.marginBottom,0)||0)));

 }

 </style>

 </head>

 <body>

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

14. 在IE6，7下输入类型的表单控件上下各有1px的间隙。

　　解决办法：给input加浮动，或者是绝对定位。

15. 在IE6，7下输入类型的表单控件加border:none;会发现border还在，

　　 解决办法: 重置input的背景，如input{background:#fff;}; 或者使用border:0;或border:0 none;

16. 在IE6，7下输入类型的表单控件输入文字的时候，其背景图片会跟着一块移动。

解决办法: 把背景加给父级。

17.关于margin负值在IE6下不兼容的问题，

　　解决办法：给对应的属性加position:relative;

eg:

 <style>

 .box{float:left;border:10px solid #000;margin:20px; display:inline;}

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

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

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

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

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

 </style>

 </head>

 <body>

 <div class="box">

     <div class="div1"></div>

 </div>

 <div class="box">

     <div class="div2"></div>

 </div>

 <div class="box">

     <div class="div3"></div>

 </div>

 <div class="box">

     <div class="div4"></div>

 </div>

目前知道的css兼容性问题只有这些，当然不包括css3，如有新发现或以上存在问题，请给予指点。

总结css兼容问题的更多相关文章

CSS兼容各浏览器的hack
CSS兼容各浏览器的hack:建议:尽可能的手写代码,可以有效的提高学习效率和深度.浏览器的种类多,麻烦自然也多,主要是各种浏览器对某些属性的渲染效果并不相同,所以有时候需要专门针对特定浏览器或者特定 ...
主流浏览器css兼容问题的总结
最近又搞了一波网站的兼容,由于要求ie浏览器还是要兼容到ie8,所以调起来还是各种蛋疼. 现在就post一些做兼容的总结,可能不够全面,但是可以告诉大家如何避过一些坑.主要测试了chrome,fire ...
CSS兼容问题实用建议
CSS兼容问题,是美工最头痛的问题.做测试时,用谷哥和360浏览器(最新)都没有什么问题,用 IE6/IE8测试,问题就冒出来了.微软现在出IE10,我电脑上已经无法用IE6准确测试,IE-TESTE ...
css兼容问题集合
css兼容问题兼容问题 1.文字本身的大小不兼容.同样是font-size:14px的宋体文字,在不同浏览器下占的空间是不一样的,ie下实际占高16px,下留白3px,ff下实际占高17px,上留白 ...
css兼容各个浏览器的三角形图标
css兼容各个浏览器的三角形图标在当前流行的的网站上,我们经常会看到一些小三角形的下拉提示(微博顶部的下拉菜单),简单的方式可以使用一张图片代替,但是随着前端技术的发展,以及开发者对于前端性能的“吹 ...
CSS兼容常用技巧
请尽量用xhtml格式写代码,而且DOCTYPE影响 CSS 处理,作为W3C标准,一定要加DOCTYPE声明. 1.div的垂直居中问题 vertical-align:middle; 将行距增加到和 ...
ie6 7 8 9 firefox的css兼容问题
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
css兼容问题与实践归纳总结
css兼容问题与实践归纳总结一.IE6/7 原生块元素与display:inline-block; <div style="display:inline-block;"&g ...
浏览器 CSS 兼容写法的测试总结
做前端最讨厌的就是 IE6,7,8,虽然被淘汰的浏览器,但是在中国用户仍然很多,不可能像国外网站一样直接就不管它了,这样会流失很多流量啊. 现在有了IE9,IE10还好些,几乎和 Chrome,Fir ...
Normalize.css源码注释翻译&浏览器css兼容问题的理解
版本v5.0.0源码地址: https://necolas.github.io/normalize.css/5.0.0/normalize.css 翻译版: /*! normalize.css v5. ...

随机推荐

Css选择器的优先级
a = 行内样式style. b = ID选择器的数量. c = 类.伪类和属性选择器的数量. d = 类型选择器和伪元素选择器的数量. 选择器等级(a,b,c,d) style=”” 1,0,0, ...
cf div2 237 D
D. Minesweeper 1D time limit per test 2 seconds memory limit per test 512 megabytes input standard i ...
UITbaleView上按钮的单选
设置Id属性,标记是哪个cell @property (nonatomic,assign)NSInteger Id; 设置一个普通状态和选中状态图片不同的按钮 _choose = [[UIButton ...
OneApm，NewRelic
https://newrelic.com/ http://www.csdn.net/article/2013-03-25/2814631-new-relic-mobile-app-real-time- ...
2014多校第五场1001 || HDU 4911 Inversion （归并求逆序数）
题目链接题意 : 给你一个数列,可以随意交换两相邻元素,交换次数不超过k次,让你找出i < j 且ai > aj的(i,j)的对数最小是多少对. 思路 : 一开始想的很多,各种都想了,后 ...
传说中的WCF（12）：服务器回调有啥用
你说,服务器端回调有啥用呢?这样问,估计不好回答,是吧.不急,先讨论一个情景. 假设现有服务器端S,客户端A开始连接S并调用相关操作,其中有一个操作,在功能上有些特殊,调用后无法即时回复,因为在服务器 ...
POJ2402/UVA 12050 Palindrome Numbers 数学思维
A palindrome is a word, number, or phrase that reads the same forwards as backwards. For example,the ...
gitHub入门指导
Github可以托管各种git库,并提供一个web界面,但与其它像 SourceForge或Google Code这样的服务不同,GitHub的独特卖点在于从另外一个项目进行分支的简易性.为一个项目贡 ...
MongoDB (十一) MongoDB 排序文档
sort() 方法要在 MongoDB 中的文档进行排序,需要使用sort()方法. sort() 方法接受一个文档,其中包含的字段列表连同他们的排序顺序.要指定排序顺序1和-1. 1用于升序排列, ...
Ajax实例-购物车
一.概述 1.当添加或删除商品时,购物车会立即更新数据 2.思路: (1)建立商品类Item.java,存有商品属性name,prince,code(商品编码)等 (2)建立商品目录类Catalog. ...

总结css兼容问题

总结css兼容问题的更多相关文章

随机推荐

热门专题