总结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. ...

随机推荐

HDOJ 1398 Square Coins 母函数
Square Coins Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Tota ...
如何实现Windows Phone代码与Unity相互通信（插件方式）
原地址:http://www.cnblogs.com/petto/p/3915943.html 一些废话原文地址: http://imwper.com/unity/petto/%E5%A6%82%E ...
javascript和swf在网页中交互的一些总结
Javascript和swf在网页中交互一般可有以下几种情况: 1.swf和这些调用的javascript在同域 2.swf和这些调用的javascript在不同域,比如加载远程的swf然后call别 ...
VMware workstation 的虚拟机中再安装workstation
在VMware workstation 10中运行的虚拟机中再安装workstation软件时,启动时会出现不断重启的故障, 解决办法: 在宿主虚拟机的.vmx文件中添加一行 monitor_cont ...
用C语言代码判别CPU的大小端模式
Big-endian和little-endian是描述排列存储在计算机内存里的字节序列的术语. Big-endian是一种大值的一端(序列中更典型值)存在前面(在最小的存储地址)的顺序. ...
robotframework 测试工具添加PDF文件内容匹配插件
robotframework 这个需要了解的请度娘.本文实现的是一个小功能.大体分为如下几个步骤 1)给定一个pdf文件. 2)读取pdf文件内容,并解析为文本内容. 3)通过给定的内容,比对pdf ...
Masonry自动布局
介绍,入门: http://www.cocoachina.com/ios/20141219/10702.html 下载: http://code.cocoachina.com/detail/30114 ...
hdu 3092 Least common multiple
思路: 容易知道,分解成素数的lcm肯定是最大的,因为假设分解成2个合数,设定x为他们的最大公约数, 那么他们的最小公倍数就要减少x倍了然后如果是素数之间的最小公倍数,那么就只是他们的乘积,同样的 ...
BZOJ 1218: [HNOI2003]激光炸弹前缀DP
1218: [HNOI2003]激光炸弹 Description 一种新型的激光炸弹,可以摧毁一个边长为R的正方形内的所有的目标.现在地图上有n(N<=10000)个目标,用整数Xi,Yi(其值 ...
hdu 4462(状态压缩)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4462 思路:由于数据不大,可以直接将所有的状态表示出来,然后枚举,判断能否将方格全部覆盖. http: ...

总结css兼容问题

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

随机推荐

热门专题