IE6 7下常见CSS兼容性处理
以下是一些比较常见的IE6 7下的兼容性问题。
在当下这个时代，其实我们几乎可以不用再去针对IE6做兼容性的处理，除非你的公司还是诡异的要求你兼容到IE6。但是了解一些常见的兼容性问题还是可以帮助我们提高一些布局上的技巧。
以下内容并不需要背下来，其实只要做到见过，万一某一天真碰到了这样的问题知道在哪里可以查看解决方法就可以了。
另外最重要的一点，我认为布局上的规范与合理是解决兼容性的最佳方案。如果布局规范，层次结构清晰，明确，那么至少在IE7下我们其实都不用做特别多的针对性的兼容处理。如果你的css需要针对IE7进行大量的hack与调试的话，最好还是检查一下自己布局上的缺陷与问题可能会更好一些。
1.
1 <style type="text/css">
2 header {
3 display: block; //自定义标签默认为inline元素，需手动转成block，不然宽高不起作用
4 width: 100px;
5 height: 100px;
6 background: red;
7 }
8 </style>
9 <script type="text/javascript">
10 document.createElement('header'); //自己创建header标签
11 </script>
因为创建出的是自定义元素，所以默认是内联元素，需要display : block转成块元素，实际开发中，由于代码量过大，所以一般我们选用引入专门针对H5标签兼容的 JS 库
2.
IE6下，块元素包含块元素浮动，如果被包含的块元素设置高度，则被包含的块元素会撑满一行，而不是随父元素浮动
1 <style type="text/css">
2 .box {
3 width: 200px;
4 border: 1px solid black;
5 overflow: hidden;
6 }
7 .left {
8 float: left;
9 background: red;
10 }
11 .right {
12 float: right;
13 background: yellow;
14 }
15 h2 {
16 height: 50px;
17 }
18 </style>
19 <!--
20 解决方案 : h2 {float: left;} //被包含的块元素也设置浮动，可解决此问题
21 -->
22 </head>
23 <body>
24 <div class="box">
25 <div class="left">
26 <h2>左边</h2>
27 </div>
28 <div class="right">
29 <h2>右边</h2>
30 </div>
31 </div>
32 </body>
3.
左右两个块元素，左面浮动，右面设置margin-left，IE6下会导致有一条缝隙的出现
1 <style type="text/css">
2 body {
3 margin: 0;
4 padding: 0;
5 }
6 .box {
7 width: 300px;
8 border: 1px solid black;
9 overflow: hidden;
10 }
11 .left {
12 float: left;
13 background: red;
14 width: 100px;
15 height: 100px;
16 }
17 .right {
18 width: 100px;
19 height: 100px;
20 background: yellow;
21 margin-left: 100px; //不要这么做，如果想达到并排显示的效果，设置该元素float:left;
22 }
23 </style>
24 <!--
25 解决方案: .right { float: left;}
26 -->
27 </head>
28 <body>
29 <div class="box">
30 <div class="left"></div>
31 <div class="right"></div>
32 </div>
33 </body>
4.
IE6下子元素宽高大于父元素宽高，会撑开父元素
1 <style type="text/css">
2 .box1 {
3 width: 50px;
4 height: 50px;
5 border: 10px solid black;
6 }
7 .box2 {
8 width: 100px;
9 height: 100px;
10 background: yellowgreen;
11 }
12 </style>
13 <!--
14 解决方案：别这么写
15 -->
16 </head>
17 <body>
18 <div class="box1">
19 <div class="box2"></div>
20 </div>
21 </body>
5.
关于margin的重叠
1 <style type="text/css">
2 * {
3 margin: 0;
4 padding: 0;
5 }
6 .box {
7 background: yellowgreen;
8 }
9 .top, .bottom {
10 margin: 50px; //子元素的margin-top传递到了父元素上，并且上下元素的垂直方向上的margin发生了合并，并不是100px，而是50px
11 height: 50px;
12 }
13 .top {
14 background: red;
15 }
16 .bottom {
17 background: blue;
18 }
19 </style>
20 <!--
21
22 1.传递的margin，对于现代浏览器可以触发BFC，比如overflow:hidden;对于IE低版本可以触发haslayout，比如zoom:1;
23 2.垂直方向上合并的margin,我们尽量采用避开此布局方法的方式解决
24
25 -->
26 </head>
27 <body>
28 <div class="box">
29 <div class="top"></div>
30 <div class="bottom"></div>
31 </div>
32 </body>
1 <style type="text/css">
2 * {
3 margin: 0;
4 padding: 0;
5 }
6 div {
7 display: inline-block;
8 width: 50px;
9 height: 50px;
10 border: 1px solid black;
11 *display:inline; //CSS hack *只有IE6能识别，转成内联元素，并触发haslayout
12 *zoom:1;
13 }
14 </style>
15 <!--
16 解决方案
17 *display:inline;
18 *zoom:1;
19 -->
20 </head>
21 <body>
22 <div></div><!--
23 --><div></div><!--
24 --><div></div>
25 </body>
1 <style>
2 div {
3 height: 1px;
4 background: red;
5 overflow: hidden; //IE6下最小高度19px, 加上overflow: hidden; 可解决最小高度问题
6 }
7 </style>
8.
IE6 7双边距问题
1 <style>
2 * {
3 margin: 0;
4 padding: 0;
5 }
6 div {
7 height: 100px;
8 width: 100px;
9 float: left;
10 margin-left: 50px;
11 background: red;
12 *display: inline; //针对IE6 7 hack
13 }
14 </style>
15 <!--
16 当元素同时设置float: left与margin-left时，元素的外边距会 *2，此处为100px
17 解决方法： Csshack *display: inline;
18 -->
9.
IE6 7 li里元素都浮动会导致下方产生4px的间隙
1 <style>
2 * {
3 margin: 0;
4 padding: 0;
5 }
6 div {
7 height: 100px;
8 width: 100px;
9 float: left;
10 margin-left: 50px;
11 background: red;
12 *display: inline; //针对IE6 7 hack
13 }
14 </style>
15 <!--
16 当元素同时设置float: left与margin-left时，元素的外边距会 *2，此处为100px
17 解决方法： Csshack *display: inline;
18 -->
19 9.
20 IE6 7 li里元素都浮动会导致下方产生4px的间隙
21
22
23 <style>
24 * {
25 margin: 0;
26 padding: 0;
27 }
28 ul {
29 list-style: none;
30 width: 300px;
31 }
32 li {
33 border: 1px solid red;
34 height: 30px;
35 line-height: 30px;
36 overflow: hidden;
37 *vertical-align: top; //针对IE6 7 hack
38 }
39 a {
40 float: left;
41 }
42 span {
43 float: right;
44 }
45 </style>
46 <!--
47 解决方案：针对IE6 7垂直方向向上对齐
48 -->
49 </head>
50 <body>
51 <ul>
52 <li>
53 <a href="">左边</a>
54 <span>右边</span>
55 </li>
56 <li>
57 <a href="">左边</a>
58 <span>右边</span>
59 </li>
60 <li>
61 <a href="">左边</a>
62 <span>右边</span>
63 </li>
64 <li>
65 <a href="">左边</a>
66 <span>右边</span>
67 </li>
68 </ul>
69 </body>
10.
1 <style>
2 .box {
3 width: 300px;
4 border: 1px solid red;
5 overflow: hidden;
6 }
7 .left {
8 float: left;
9 }
10 .right {
11 float: right;
12 width: 298px;
13 }
14 </style>
15 </head>
16 <!-
17 当浮动元素之间出现内联元素或注释并且宽度与父元素相差3px以内时，会出现多出文字问题
18 解决方法：避免出现内联元素或是宽度差大于3px
19 -->
20 <body>
21 <div class="box">
22 <div class="left"></div>
23 <span></span>
24 <div class="right">会多出文字的</div>
25 </div>
26 </body>
11.
IE6 7下父元素overflow: hidden;包不住relative的子元素
1 <style>
2 .box {
3 width: 100px;
4 height: 100px;
5 border: 10px solid red;
6 overflow: hidden;
7 *position: relative; //针对IE6 7hack，让父元素也相对定位
8 }
9 .div1 {
10 width: 150px;
11 height: 150px;
12 background: blue;
13 position: relative;
14 }
15 </style>
16 </head>
17 <body>
18 <div class="box">
19 <div class="div1"></div>
20 </div>
21 </body>
12.
IE6下绝对定位元素的父级宽高为奇数时，绝对定位元素right与bottom会有1px的偏差
1 <style>
2 .box {
3 width: 99px;
4 height: 99px;
5 background: red;
6 position: relative;
7 }
8 .div1 {
9 width: 20px;
10 height: 20px;
11 background: blue;
12 position: absolute;
13 right: 0;
14 bottom: 0;
15 }
16 </style>
17 </head>
18 <!-
19 解决方案：避免父元素宽高为奇数
20 -->
21 <body>
22 <div class="box">
23 <div class="div1"></div>
24 </div>
25 </body>
13.
IE下
1 <style>
2 .box {
3 width: 100px;
4 height: 100px;
5 background: red;
6 position: relative;
7 }
8 .div1 {
9 width: 50px;
10 height: 50px;
11 background: yellow;
12 float: left;
13 margin-left: 50px;
14 *display: inline;
15 }
16 span {
17 position: absolute;
18 width: 20px;
19 height: 20px;
20 background: blue;
21 right: -10px;
22 top: -10px;
23 }
24 </style>
25 <!-
26 解决方案：避免定位元素与浮动元素同级，此处将span元素嵌套到另一个元素内
27 -->
28 </head>
29 <body>
30 <div class="box">
31 <div class="div1"></div>
32 <span></span>
33 <!--<div>
34 <span></span>
35 </div>-->
36 </div>
37 </body>
14.
IE下input标签会留有空隙
1 <style>
2 * {
3 margin: 0;
4 padding: 0;
5 border: none;
6 }
7 .box {
8 width: 100px;
9 height: 30px;
10 background: red;
11 }
12 input {
13 height: 30px;
14 background: white;
15 _float: left; //针对IE6hack
16 }
17 </style>
18 <!-
19 解决方案：针对IE6hack 让input浮动
20 -->
21 </head>
22 <body>
23 <div class="box">
24 <input type="text">
25 </div>
26 </body>
15.
input输入类型表单空间背景图片问题
1 <style>
2 input {
3 background: url("mail.jpg") no-repeat fixed;
4 }
5 </style>
6 </head>
7 <body>
8 <input type="text">
9 </body>
10 <!-
11 解决方案：背景图片设置fixed属性
12 -->
IE6 7下常见CSS兼容性处理的更多相关文章
- IE5,IE6,IE7,IE8的css兼容性列表[转自MSDN]
CSS 2.1: IE 5.0 IE 5.5 IE 6.0 IE 7.0 IE8 Beta 1 IE8 Beta 2 IE 8.0 @charset No Yes Yes Yes Yes Yes ...
- ie6下常见的bug 调整页面兼容性
ie6下常见的bug 我们布局页面,首先符合标准,如何写一个页面的标准性? 但是ie6等浏览器本身就比较特殊,bug比较多,兵法云,知己知彼百战百胜.我们需要了解ie6的一些常见bug,这样,更好的调 ...
- IE下常见兼容性问题总结
概述 本小菜平时主要写后台程序,偶尔也会去写点前端页面,写html.css.js的时候,会同时开着ie6.ie7.ie8.ie9.chrome.firefox等浏览器进行页面测试,和大部分前端开发一样 ...
- ie6常见的兼容性
1.IE6怪异解析之padding与border算入宽高 原因:未加文档声明造成非盒模型解析 解决方法:加入文档声明<!doctype html> 2.IE6在块元素.左右浮动.设定mar ...
- css解决IE6，IE7，firefox兼容性问题
在当前IE6 IE7 FifeFox三分天下的情况下,浏览器兼容性问题成为网页设计者需要考虑的问题. 区别不同浏览器的CSS hack写法: 区别IE6与FF: background:orange;* ...
- IE6/7/8 CSS兼容性问题和解决方法汇总
断断续续的在开发过程中收集了好多的bug以及其解决的办法,都在这个文章里面记录下来了!希望以后解决类似问题的时候能够快速解决,也希望大家能在留言里面跟进自己发现的ie6 7 8bug和解决办法! 1: ...
- IE6常见CSS解析Bug及hack
IE6常见CSS兼容问题总结 1)图片间隙 A)div中的图片间隙(该bug出现在IE6及更低版本中) 描述:在div中插入图片时,图片会将div下方撑大三像素. hack1:将</div> ...
- IE6条件下的bug与常见的bug及其解决方法
1.IE6条件下有双倍的margin 解决办法:给这个浮动元素增加display:inline属性 2. 图片底部有3像素问题 解决办法:display:block;或者vertical-align: ...
- IE7,6与Fireofx的CSS兼容性处理方法集结
CSS对浏览器的兼容性有时让人很头疼,尤其是对于IE6这个问题多多的浏览器版本,从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于web2.0的过度,请尽量用xhtml格式写代码 ...
随机推荐
- stickUp让页面元素“固定”位置
stickUp能让页面目标元素“固定”在浏览器窗口的顶部,即便页面在滚动,目标元素仍然能出现在设定的位置. http://www.bootcss.com/p/stickup/
- 为什么SqlTransaction.Rollback会抛出SqlException(11,-2)(即SQL超时异常)
// System.Data.SqlClient.SqlTransaction public override void Rollback() { if (this.IsYukonPartia ...
- Oracle数据库BLOB字段的存取
述] Oracle的Blob字段比较特殊,他比long字段的性能要好很多,可以用来保存例如图片之类的二进制数据. 写入Blob字段和写入其它类型字段的方式非常不同,因为Blob自身有一个cur ...
- 关于Jquery中的$.each获取各种返回类型数据的使用方法
var arr = [ "one", "two", "three", "four"]; $.each(arr, func ...
- 通过rem编写自适应移动端要点
直接上干货 1,dpr 苹果手机像素是2 普通安卓机是1 也就是说1像素下苹果需要的像素点是安卓机的两倍 所以一个需要15x15显示的图像安卓机仅需要提供15X15即可显示清楚 苹果手机需要要30X3 ...
- flask + uwsgi 生产环境
https://www.digitalocean.com/community/tutorials/how-to-deploy-flask-web-applications-using-uwsgi-be ...
- 关于C中struct和union长度的详解
这几天看<代码大全>中的第十三章---不常见的数据类型,里面讲解到了C语言中的struct以及对指针的解释,联想到以前看过相关的关于C语言中stuct长度的文章,只是现在有些淡忘了,因此今 ...
- kaggle& titanic代码
这两天报名参加了阿里天池的’公交线路客流预测‘赛,就顺便先把以前看的kaggle的titanic的训练赛代码在熟悉下数据的一些处理.题目根据titanic乘客的信息来预测乘客的生还情况.给了titan ...
- tp框架总结（四）
一 ajax的返回 调用实例: $this->ajaxReturn(返回数据,提示信息,操作状态); $this->ajaxReturn(返回数据,‘json’); js: <scr ...
- Linux 之加密类型，CA，Openssl，Openssh
TCP/IP:安全 A------->B 机密性:明文传输(ftp,http,smtp,telnet),被窃听 完整性:消息被篡改 身份验证:你访问的主机就是你真实要访问的那台,而不是钓鱼网站 ...