p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; color: #a5b2b9 }
span.Apple-tab-span { white-space: pre }

兼容性问题有哪些？

1、IE6下怪异盒模型

　　　标准盒模型：总宽度=width+padding+border

　怪异盒模型：总宽度=width

2、IE6下最小高度问题

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; color: #a5b2b9 }
span.Apple-tab-span { white-space: pre }

　　 IE6下块元素高度小于19px，会被当做19px来处理

　解决办法 ：

　　1、overflow:hidden 推荐

　　2、font-size: 0;

3、IE6下不支持1px的点线

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; color: #a5b2b9 }

　　IE6不支持一像素的点划线，用背景图代替

4、IE6下内容会把父级的高度撑开

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; color: #a5b2b9 }
span.Apple-tab-span { white-space: pre }

　　IE6下内容会把父级的高度撑开

解决办法

overflow: hidden;

5、IE6下只支持给a标签添加伪类

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; color: #a5b2b9 }

　　IE6不支持除了a标签以外标签的伪类

6、IE6、7下不支持给块标签加display:inline-block

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; color: #a5b2b9 }

　　IE67不支持块元素display:inline-block

7、IE8以及IE8以前的浏览器都不支持opacity

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; color: #a5b2b9 }
span.Apple-tab-span { white-space: pre }

　　IE8以及IE8以前的浏览器都不支持opacity

解决办法

　　用filter

8、IE6不支持固定定位

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; color: #a5b2b9 }

　　IE6不支持固定定位，可以用js来解决

9、IE6下前面元素浮动，后面元素不浮动后他们之间会有间隙

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; color: #a5b2b9 }
span.Apple-tab-span { white-space: pre }

　　IE6下前面元素浮动，后面元素不浮动后他们之间会有间隙

　解决办法

　　给后面元素也添加浮动

10、IE6下双边距问题

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; color: #a5b2b9 }
span.Apple-tab-span { white-space: pre }

　　IE6下块元素有浮动，并且有横向margin(左右)，那最终的距离是原来的两倍

解决方法

　　 给元素添加display:inline;

11、IE67下父级有边框，子级有margin的话会不起作用

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; color: #a5b2b9 }
span.Apple-tab-span { white-space: pre }

　　在IE67下，父级有边框，子级有margin，那子级的margin会不起作用

解决办法

　　触发父级的layout

12、IE6下，每行元素的宽度与父级的宽度相差超过2px，最后一行的margin-bottom会失效（IE7不管相差多少，直接失效）

　　IE6下，每行元素的宽度与父级的宽度相差超过2px，最后一行的margin-bottom会失效

IE7下，不管宽度相差多少，直接失效

　　 解决方法：

　　用padding解决

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; color: #a5b2b9 }
span.Apple-tab-span { white-space: pre }

13、IE6下元素中除了文字之外，还有inline-block类型元素，元素的行高会失效

　　在IE6下，元素中除了文字之外，还有inline-block类型元素，那元素的行高会失效

解决办法： 分别包起来，分别设置行高

14、IE6下文字溢出的问题

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; color: #a5b2b9 }
span.Apple-tab-span { white-space: pre }

　　在IE6下，两个浮动元素中间有注释或者空行内标签，父级的宽度和子元素宽度相差小于3px，元素内的文字会被复制出来

解决办法

1、把注释或者行内元素用div包起来

3、把父级的宽度加3px

15、IE67li间隙问题

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; color: #a5b2b9 }
span.Apple-tab-span { white-space: pre }

　　IE67下，li里有左右浮动的元素，会造成每个li下边有间隙的问题

解决办法

1、给li加vertical-align: middle;

2、给li浮动

16、IE67下子级有相对定位，并且比父级要大。那父级overflow:hidden;后是包不住它的

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; color: #a5b2b9 }
span.Apple-tab-span { white-space: pre }

　　IE67下子级有相对定位，并且比父级要大。那父级overflow:hidden;后是包不住它的

解决办法

给父级也加相对定位

17、IE6下同一层级的浮动元素会盖住绝对定位元素

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; color: #a5b2b9 }
span.Apple-tab-span { white-space: pre }

　　　 IE6下同一层级的浮动元素会盖住绝对定位元素

　　 解决办法

　　 给定位元素外面嵌套一个层

18、IE6下定位父级的宽高是奇数的话，元素的right值或者bottom值会有1px的偏差

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; color: #a5b2b9 }

　　在IE6下，定位父级的宽高是奇数的话，元素的right值或者bottom值会有1px的偏差

19、IE6下通过margin负值，使元素移出父级的位置，那出去的部分会被截掉

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; color: #a5b2b9 }
span.Apple-tab-span { white-space: pre }

　　　　IE6下通过margin负值，使元素移出父级的位置，那出去的部分会被截掉

　　 解决方法

　　 　　给元素添加相对定位，或者给父级overflow:hidden;

20、IE67下输入类型的表单控件，上下两边各有1px的间隙

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; color: #a5b2b9 }
span.Apple-tab-span { white-space: pre }

　　IE67下输入类型的表单控件，上下两边各有1px的间隙

解决办法

　　给控件加浮动

21、IE8以及IE8之前不识别H5标签

　　　　解决办法：不使用

22、IE6不支持png透明图片

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; color: #a5b2b9 }

　　　　IE6不支持png-24透明图片

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; color: #a5b2b9 }
span.Apple-tab-span { white-space: pre }
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; color: #a5b2b9 }
span.Apple-tab-span { white-space: pre }

兼容性问题--HTML+CSS的更多相关文章

  1. 兼容性好的CSS字体投影

    <p>兼容性良好的css文字描边</p> <style><!-- h1, p { color: #fff; width: 100%; text-align: ...

  2. 兼容性问题（ css）

    记录平时遇见的兼容性问题,有更好的解决办法希望各位提出,会持续更新 提出时间 问题描述 解决方案 2014/7/15 table下面使用img或者其他元素例如embed会产生,对应的空隙,假如使用文字 ...

  3. CSS的兼容性解决方案

    什么是兼容性? 同一个网页,在不同浏览器下(IE6.IE7.IE8)下的显示效果不一致,这就是说"CSS不兼容". IETESTer可以同时测试IE5.5.IE6.IE7.IE8这 ...

  4. css兼容性问题

    其实做网页最大的问题还是兼容性吧,要调试IE的各种浏览器. DIV+CSS设计IE6.IE7.FF 兼容性  DIV+CSS网页布局这是一种趋势,我也开始顺应这股趋势了,不过在使用DIV+CSS网站设 ...

  5. CSS兼容性常见问题总结

    DIV+CSS设计IE6.IE7.FF 兼容性 DIV+CSS网页布局这是一种趋势,我也开始顺应这股趋势了,不过在使用DIV+CSS网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使 ...

  6. CSS 兼容性支持

    CSS 兼容性支持 在一个CSS属性还没有成为标准之前,各浏览器厂商已经做了这个属性的实现,可能各浏览器实现不尽相同,所以加入属性前缀区分. safari , chrome:-webkit- oper ...

  7. css兼容性问题总结

    DIV+CSS设计IE6.IE7.FF 兼容性 DIV+CSS网页布局这是一种趋势,我也开始顺应这股趋势了,不过在使用DIV+CSS网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使 ...

  8. html+css知识点总结（田彦霞）

    html部分 html头部声明 DOCTYPE是document type(文档类型)的简写,用来说明你用的XHTML或者HTML是什么版本.DOCTYPE声明必须放在每一个XHTML文档最顶部,在所 ...

  9. javaweb css教程

    CSS 1.css的简介 * css: 层叠样式表 ** 层叠:一层一层的 ** 样式表: 很多的属性和属性值 * 是页面显示效果更加好 * CSS将网页内容和显示样式进行分离,提高了显示功能. 2. ...

随机推荐

  1. java:接口特性 接口与抽象类/普通类的区别

    接口 书面定义: Java接口是一系列方法的声明,是一些方法特征的集合,一个接口只有方法的特征没有方法的实现,因此这些方法可以在不同的地方被不同的类实现,而这些实现可以具有不同的行为(功能). 在ja ...

  2. 命令导入导出oracle库

    目前还是新手:所以记录下来最笨的方式,留用 一.从服务器先把库导出来 exp sys/mima@orcl  file = "d:\pybghs.dmp"   full=y 二.从服 ...

  3. Java内部类的总结

    内部类是指在一个外部类的内部再定义一个类.类名不需要和文件夹相同. 内部类分为: 成员内部类.局部内部类.静态嵌套类.匿名内部类 . 1.成员内部类 成员内部类是最普通的内部类,它的定义为位于另一个类 ...

  4. Activiti常见问题解决

    1,工作流activiti eclipse 插件不自动生成png window ——> preferences——>activiti——>save——>选中create pro ...

  5. c# 第一节课 一些简单的应用

    注册要钱 我没钱

  6. 实现一个简单的虚拟DOM

    现在的流行框架,无论React还是Vue,都采用虚拟DOM. 好处就是,当我们数据变化时,无需像Backbone那样整体重新渲染,而是局部刷新变化部分,如下组件模版: <ul class=&qu ...

  7. angular 如何获取使用filter过滤后的ng-repeat的数据长度

    在做项目的过程中,被产品要求在内容为空的过程中显示提示信息,然哦户内容使用ng-repeat循环输出的,并且使用了filter过滤.后在谷歌上找到解决方案,如下: ​之前代码如下显示: <ul& ...

  8. thinkphp的select和find的区别

    hinkphp是比较好的php开发框架,能比较快速的开发MVC架构的管理系统,我们需要用到 select()和find()方法,两个方法都能返回数据集数组,但有什么不同呢?先看一下我的代码对比:$te ...

  9. Jest 单元测试入门

    今天,我们要讲的是 Jest 单元测试的入门知识. 为何要进行单元测试? 在学习 Jest 之前,我们需要回答一个问题:为何要进行单元测试?编写单元测试可以给你带来很多好处: 将测试自动化,无需每次都 ...

  10. Java的类加载器

    一.类加载器的概念 类加载器(class loader)用来加载 Java 类到 Java 虚拟机中.一般来说,Java 虚拟机使用 Java 类的方式如下:Java 源程序(.java 文件)在经过 ...