对目前所遇见的兼容性笔记进行整理分类:

不兼容浏览器 问题概要 问题描述 解决方法
IE6,IE7  3px 并列一行的元素左侧第一个元素没浮动,第二个元素左浮动,
则两个元素之间会多3像素空隙
并在一行的元素如果有一个元素有浮动,则都加浮动
IE6,IE7 下折行 并列一行的元素左侧元素没浮动,右侧元素右浮动,则右侧浮动元素向下折行 并在一行的元素如果有一个元素有浮动,则都加浮动
IE6 双边距 块属性标签浮动,并且有横向margin值,横向margin加倍 块元素添加display:inline
IE6,IE7 li li无浮动,li内部元素有浮动,li下会多出来3px左右的间隙 给li添加vertical-align:top 或给li添加浮动
IE6 最小高度 最小高度不小于19px 设置 overflow:hidden得到高度为设置的height
IE6 最小高度+li 当最小高度问题和 li 的间隙问题共存的时候 只能给li添加浮动,且添加overflow:hidden
IE6,IE7 图片间隙 图片下有间隙 给图片添加vertical-align
IE6 margin消失 当一行子元素占有的宽度之和,和父级的宽度相差超过3px,或者有不满行状态的时候,最后一行子元素的下margin在IE6下就会失效 尽量避免该情况
IE6 文字溢出 子元素的宽度和父级的宽度相差小于3px的时候,两个浮动元素中间有注释或者内嵌元素文字莫名其妙多出几个 用div把注释或者内嵌元素包起来
IE6 浮动与绝对定位 当浮动元素和绝对定位元素是并列关系的时候,在IE6下绝对定位元素会消失 把绝对定位元素套个div,或在添加zoom:1;触发layout
IE6 Fiexd 不支持固定定位 position:fiexd; 需要配合JS计算滚动尺寸实现兼容
IE6 溢出 父级的 overflow:hidden; 包不住子级的relative; 给父级也添加relative
IE6 1px 定位元素的父级宽高都为奇数那么定位元素的 right 和 bottom 都有1像素的偏差。 尽量避免改情况
IE6,IE7 表单高度 表单元素select/option 下拉选框   对高度的支持不兼容 通常不设置高度
IE6,IE7 textarea 各个浏览器下的默认滚动条显示不兼容 添加 overflow:auto;
IE6,IE7 textarea css3新增 resize 调整尺寸属性; resize:none; 不能自由拖动改变尺寸,
IE6 input背景滚动 input背景随着内容增多而移动 在input外面添加一个div,div上设置背景,或者添加给其父级,input全部透明
IE6 撑开父级宽度 子级宽度如果超过父级宽度,会撑开父级宽度,而其它浏览器不会撑开父级宽度 需要精确计算好
IE6 Fiexd 不支持固定定位 position:fiexd; 需要配合JS计算滚动尺寸实现兼容
IE6 溢出 父级的 overflow:hidden; 包不住子级的relative; 给父级也添加relative
IE6 1px 定位元素的父级宽高都为奇数那么定位元素的 right 和 bottom 都有1像素的偏差。 尽量避免改情况
IE6,IE7 表单高度 表单元素select/option 下拉选框   对高度的支持不兼容 通常不设置高度
IE6,IE7 textarea 各个浏览器下的默认滚动条显示不兼容 添加 overflow:auto;
IE6,IE7 textarea css3新增 resize 调整尺寸属性; resize:none; 不能自由拖动改变尺寸,
IE6 input背景滚动 input背景随着内容增多而移动 在input外面添加一个div,div上设置背景,或者添加给其父级,input全部透明
IE6 撑开父级宽度 子级宽度如果超过父级宽度,会撑开父级宽度,而其它浏览器不会撑开父级宽度 需要精确计算好
IE6 子集宽度撑满父级 父级元素浮动,如果要求子集元素宽度内容撑开,就给里面的子集块元素都加浮动,不然子集元素会撑到父级设置的宽度
IE6 dotted 1px dotted 在IE6下不支持 切图片背景平铺
IE6 margin消失 父级有边框的时候,子元素的margin值消失 触发父级的haslayout
IE6 margin传递 有时候子级的margin值会传递到父级上 触发父级的haslayout
IE6,IE7 表单背景 如果tr于thead或tbody同时有背景,则thead和tbody的背景会消失 尽量避免
IE6,IE7 input border 输入类型的表单控件加border:none;无效,,依然会有边框。 重置input的背景
IE6 PNG半透明 PNG半透明图片在IE6下不起作用 解决方案:采用专属IE6的js插件
DD_belatedPNG_0.0.8a.js
PNG半透明图片会有从整个页面左上角掉下划入的情况 在其父级添加 相对定位  position:relative;
PNG半透明背景图尽量不要处理鼠标移入的背景图,会出现闪动的情况,  移入之前都设定PNG半透明背景图,不过位置需要移出标签外,当鼠标移入后,将背景图移回原位。
IE6 !important 在!Important 后边再加一条同样的样式,会破坏掉 !important的作用,会按照默认的优先级顺序来走。 尽量避免

HTML&CSS兼容性总结的更多相关文章

  1. css兼容性问题的整理

    css兼容性问题的整理 1.文字本身的大小不兼容.同样是font-size:14px的宋体文字,在不同浏览器下占的空间是不一样的,ie下实际占高16px,下留白3px,ff下实际占高17px,上留白1 ...

  2. CSS兼容性详解

    前面的话 对于前端工程师来说,不想面对又不得不面对的一个问题就是兼容性.在几年之前,处理兼容性,一般地就是处理IE低版本浏览器的兼容性.而近几年,随着移动端的发展,工程师也需要注意手机兼容性了.本文将 ...

  3. css 兼容性问题,整理

    css 兼容性问题,整理: css 兼容性问题 说明 <input type="number"> 在chrome下,是不能输入非数字的字符的:但是在火狐63.0.3(2 ...

  4. IE和Firefox浏览器CSS兼容性技巧整理

    转自:http://homepage.yesky.com/185/11484185all.shtml#p11484185 CSS兼容常用技巧(1) 更多精彩相关文章推荐: 各大浏览器 CSS3 和 H ...

  5. CSS 兼容性支持

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

  6. 浏览器对DIV+CSS兼容性问题大总结

    浏览器对DIV+CSS兼容性问题大总结 接触DIV+CSS架构已经快两年了,个人觉得css入门不难,但要学精并非一朝一夕的,现在大部分网络公司都比较主张用div+css来布局,这就面临着一个比较难的问 ...

  7. 解决css兼容性

    关于CSS对各个浏览器兼容已经是老生常谈的问题了, 网络上的教程遍地都是.以下内容没有太多新颖, 纯属个人总结, 希望能对初学者有一定的帮助. 一.CSS HACK 以下两种方法几乎能解决现今所有HA ...

  8. 前端css兼容性与易混淆的点

    一.常用的骨灰级清除浮动 .clearfix:after { content: "."; display: block; height:; clear: both; visibil ...

  9. IE7,6与Fireofx的CSS兼容性处理方法集结

    CSS对浏览器的兼容性有时让人很头疼,尤其是对于IE6这个问题多多的浏览器版本,从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于web2.0的过度,请尽量用xhtml格式写代码 ...

  10. IE6 7下常见CSS兼容性处理

    以下是一些比较常见的IE6 7下的兼容性问题. 在当下这个时代,其实我们几乎可以不用再去针对IE6做兼容性的处理,除非你的公司还是诡异的要求你兼容到IE6.但是了解一些常见的兼容性问题还是可以帮助我们 ...

随机推荐

  1. java中Array和ArrayList区别

    1)精辟阐述:可以将 ArrayList想象成一种“会自动扩增容量的Array”. 2)Array([]):最高效:但是其容量固定且无法动态改变:     ArrayList:  容量可动态增长:但牺 ...

  2. 留存: struts2+jquery+json集成

    原文地址:struts2+jquery+json集成 以下采用struts2+jquery+json模拟一个案例.当点击提交按钮时会把输入的数据提交到后台,然后从后台获取数据在客户端显示. 效果如下: ...

  3. cookie 和 session 区别

    二者的定义: 当你在浏览网站的时候,WEB 服务器会先送一小小资料放在你的计算机上,Cookie 会帮你在网站上所打的文字或是一些选择, 都纪录下来.当下次你再光临同一个网站,WEB 服务器会先看看有 ...

  4. 10-pymysql的应用

    import pymysql # user = input('请输入用户名:') # pwd = input('请输入密码:') # 1.创建连接 conn = pymysql.connect(hos ...

  5. Node.js实现PC端类微信聊天软件(二)

    Github StackChat 用到的React-Router React-Router是React路由的解决方案之一,也可以使用别的库 安装 npm install react-router -- ...

  6. kubernetes实战篇之Dashboard的访问权限限制

    系列目录 前面我们的示例中,我们创建的ServiceAccount是与cluster-admin 绑定的,这个用户默认有最高的权限,实际生产环境中,往往需要对不同运维人员赋预不同的权限.而根据实际情况 ...

  7. Fastjson的SerializerFeature序列化属性

    Fastjson的SerializerFeature序列化属性 fastJson在key的value为null时,默认是不显示出这个字段的 JSONObject.toJSONString(Object ...

  8. Linux 配置 history 命令显示操作时间、用户和登录 IP

    一.在配置文件中(/etc/bashrc 或者 /etc/profile 或者~/.bash_profile 或者 ~/.bashrc)添加如下配置 #vim /etc/bashrc    // 进到 ...

  9. python模块之:paramiko

    1. 介绍: paramiko是一个用于做远程控制的模块,使用该模块可以对远程服务器进行命令或文件操作,值得一说的是,fabric和ansible内部的远程管理就是使用的paramiko来实现.安装: ...

  10. SQL Server温故系列(4):SQL 查询之集合运算 & 聚合函数

    1.集合运算 1.1.并集运算 UNION 1.2.差集运算 EXCEPT 1.3.交集运算 INTERSECT 1.4.集合运算小结 2.聚合函数 2.1.求行数函数 COUNT 2.2.求和函数 ...