HTML&CSS兼容性总结
对目前所遇见的兼容性笔记进行整理分类:
不兼容浏览器 | 问题概要 | 问题描述 | 解决方法 |
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兼容性总结的更多相关文章
- css兼容性问题的整理
css兼容性问题的整理 1.文字本身的大小不兼容.同样是font-size:14px的宋体文字,在不同浏览器下占的空间是不一样的,ie下实际占高16px,下留白3px,ff下实际占高17px,上留白1 ...
- CSS兼容性详解
前面的话 对于前端工程师来说,不想面对又不得不面对的一个问题就是兼容性.在几年之前,处理兼容性,一般地就是处理IE低版本浏览器的兼容性.而近几年,随着移动端的发展,工程师也需要注意手机兼容性了.本文将 ...
- css 兼容性问题,整理
css 兼容性问题,整理: css 兼容性问题 说明 <input type="number"> 在chrome下,是不能输入非数字的字符的:但是在火狐63.0.3(2 ...
- IE和Firefox浏览器CSS兼容性技巧整理
转自:http://homepage.yesky.com/185/11484185all.shtml#p11484185 CSS兼容常用技巧(1) 更多精彩相关文章推荐: 各大浏览器 CSS3 和 H ...
- CSS 兼容性支持
CSS 兼容性支持 在一个CSS属性还没有成为标准之前,各浏览器厂商已经做了这个属性的实现,可能各浏览器实现不尽相同,所以加入属性前缀区分. safari , chrome:-webkit- oper ...
- 浏览器对DIV+CSS兼容性问题大总结
浏览器对DIV+CSS兼容性问题大总结 接触DIV+CSS架构已经快两年了,个人觉得css入门不难,但要学精并非一朝一夕的,现在大部分网络公司都比较主张用div+css来布局,这就面临着一个比较难的问 ...
- 解决css兼容性
关于CSS对各个浏览器兼容已经是老生常谈的问题了, 网络上的教程遍地都是.以下内容没有太多新颖, 纯属个人总结, 希望能对初学者有一定的帮助. 一.CSS HACK 以下两种方法几乎能解决现今所有HA ...
- 前端css兼容性与易混淆的点
一.常用的骨灰级清除浮动 .clearfix:after { content: "."; display: block; height:; clear: both; visibil ...
- IE7,6与Fireofx的CSS兼容性处理方法集结
CSS对浏览器的兼容性有时让人很头疼,尤其是对于IE6这个问题多多的浏览器版本,从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于web2.0的过度,请尽量用xhtml格式写代码 ...
- IE6 7下常见CSS兼容性处理
以下是一些比较常见的IE6 7下的兼容性问题. 在当下这个时代,其实我们几乎可以不用再去针对IE6做兼容性的处理,除非你的公司还是诡异的要求你兼容到IE6.但是了解一些常见的兼容性问题还是可以帮助我们 ...
随机推荐
- java中Array和ArrayList区别
1)精辟阐述:可以将 ArrayList想象成一种“会自动扩增容量的Array”. 2)Array([]):最高效:但是其容量固定且无法动态改变: ArrayList: 容量可动态增长:但牺 ...
- 留存: struts2+jquery+json集成
原文地址:struts2+jquery+json集成 以下采用struts2+jquery+json模拟一个案例.当点击提交按钮时会把输入的数据提交到后台,然后从后台获取数据在客户端显示. 效果如下: ...
- cookie 和 session 区别
二者的定义: 当你在浏览网站的时候,WEB 服务器会先送一小小资料放在你的计算机上,Cookie 会帮你在网站上所打的文字或是一些选择, 都纪录下来.当下次你再光临同一个网站,WEB 服务器会先看看有 ...
- 10-pymysql的应用
import pymysql # user = input('请输入用户名:') # pwd = input('请输入密码:') # 1.创建连接 conn = pymysql.connect(hos ...
- Node.js实现PC端类微信聊天软件(二)
Github StackChat 用到的React-Router React-Router是React路由的解决方案之一,也可以使用别的库 安装 npm install react-router -- ...
- kubernetes实战篇之Dashboard的访问权限限制
系列目录 前面我们的示例中,我们创建的ServiceAccount是与cluster-admin 绑定的,这个用户默认有最高的权限,实际生产环境中,往往需要对不同运维人员赋预不同的权限.而根据实际情况 ...
- Fastjson的SerializerFeature序列化属性
Fastjson的SerializerFeature序列化属性 fastJson在key的value为null时,默认是不显示出这个字段的 JSONObject.toJSONString(Object ...
- Linux 配置 history 命令显示操作时间、用户和登录 IP
一.在配置文件中(/etc/bashrc 或者 /etc/profile 或者~/.bash_profile 或者 ~/.bashrc)添加如下配置 #vim /etc/bashrc // 进到 ...
- python模块之:paramiko
1. 介绍: paramiko是一个用于做远程控制的模块,使用该模块可以对远程服务器进行命令或文件操作,值得一说的是,fabric和ansible内部的远程管理就是使用的paramiko来实现.安装: ...
- SQL Server温故系列(4):SQL 查询之集合运算 & 聚合函数
1.集合运算 1.1.并集运算 UNION 1.2.差集运算 EXCEPT 1.3.交集运算 INTERSECT 1.4.集合运算小结 2.聚合函数 2.1.求行数函数 COUNT 2.2.求和函数 ...