总结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">↓哈哈哈哈哈哈哈哈哈哈</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. ...
随机推荐
- D3D depth buffer的预览
在使用D3D开发游戏的过程中,很多情况下都会用到depth buffer来完成特定的效果,比如DOF,Shadows,SSAO等等.在这些情况下我们就可能需要预览depth buffer来确定它是正确 ...
- Pytho中两种方式导入模块的差别
1.使用import module,只是把模块导入,访问模块中的函数名或者是属性是必须使用点运算符(.)来访问,否则直接访问会提示找不到这些函数或者属性. 2.使用from numpy import ...
- Libevent详细说明
文章来自官方文档的部分翻译:http://www.wangafu.net/~nickm/libevent-book/ 通过这部分的了解,基本上可以使用libevent的常用功能了.有时间建议直接看官方 ...
- CodeIgniter 错误： In order to use the Session class you are required to set an encryption key
CodeIgniter SESSION 第一次用 session 遇到这个错误 , 说是要加一个密钥才可以使用,加就加吧, 打开 config.php 找到以下代码 /*|------------- ...
- POJ 1027 The Same Game(模拟)
题目链接 题意 : 一个10×15的格子,有三种颜色的球,颜色相同且在同一片内的球叫做cluster(具体解释就是,两个球颜色相同且一个球可以通过上下左右到达另一个球,则这两个球属于同一个cluste ...
- Ubuntu--服务器版本系统安装图解教程
附Ubuntu Server 13.04系统镜像下载地址: 32位:http://mirrors.163.com/ubuntu-releases/13.04/ubuntu-13.04-server-i ...
- js浮点数的计算
js在计算浮点数时可能不够准确,会产生舍入误差的问题,这是使用基于IEEE745数值的浮点计算的通病,并非ECMAScript一家,其他使用相同数值格式的语言也存在这个问题. 这里讲一 ...
- 《Linux shell变量总结回顾》RHEL6（转）
文章版权:http://www.cnblogs.com/linux-super-meng/ 环境变量路径: [root@localhost ~]# set //查看到的是局部变量和全局变量2种 [ ...
- 深度学习框架Caffe —— Deep learning in Practice
因工作交接需要, 要将caffe使用方法及整体结构描述清楚. 鉴于也有同学问过我相关内容, 决定在本文中写个简单的tutorial, 方便大家参考. 本文简单的讲几个事情: Caffe能做什么? 为什 ...
- USACO Section 2.2: Preface Numbering
搬了leetcode的代码 /* ID: yingzho1 LANG: C++ TASK: preface */ #include <iostream> #include <fstr ...