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

随机推荐

Itunes connect State: Developer Action Needed
In-App Purchases have been returned and are highlighted in the table below. Your In-App Purchase has ...
原 JS监听回车事件
原 JS监听回车事件发表于2年前(2014-06-04 10:16) 阅读(6101) | 评论(0) 11人收藏此文章, 我要收藏赞0 1月16日厦门 OSC 源创会火热报名中,奖品多多哦 ...
VS2012 win7 修改TFS登陆账号
1.修改登陆账号: 在网上搜了好多,都没有找到解决方法,自己琢磨了一会找到了修改登陆TFS(Team Foundation Server)(团队资源管理器)的账号,和大家分享一下吧. 点击“开始”-- ...
mysql 事务提交过程
打开binlog选项后,执行事务提交命令时,就会进入两阶段提交模式.两阶段提交分为prepare阶段和commit两个阶段.流程如下 :这里面涉及到两个重要的参数:innodb_flush_log_ ...
POJ 2549
Sumsets Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 8235 Accepted: 2260 Descripti ...
POJ 2541 Binary Witch（逆序KMP，好题）
逆序KMP,真的是强大! 参考链接,下面有题意解释:http://blog.sina.com.cn/s/blog_6ec5c2d00100tphp.htmlhttp://blog.csdn.net/s ...
Android Handler的使用
大家好我们这一节讲的是Android Handler的使用,在讲Handler之前,我们先提个小问题,就是如何让程序5秒钟更新一下Title. 首先我们看一下习惯了Java编程的人,在不知道Handl ...
.bash_profile和.bashrc的区别(如何设置生效)
/etc/profile:此文件为系统的每个用户设置环境信息,当用户第一次登录时,该文件被执行.并从/etc/profile.d目录的配置文件中搜集shell的设置. /etc/bashrc:为每一个 ...
java 关于mysql
com.mysql.jdbc.exceptions.jdbc4.MySQLNonTransientConnectionException: No operations allowed after co ...
HDU 1026 Ignatius and the Princess I （BFS）
题目链接题意 : 从(0,0)点走到(N-1,M-1)点,问最少时间. 思路 : BFS..... #include <stdio.h> #include <string.h> ...

总结css兼容问题

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

随机推荐

热门专题