css 兼容性总结
1.就是ie6双倍边距的问题，在使用了float的情况下，不管是向左还是向右都会出现双倍，最简单的解决方法就是用display:inline;加到css里面去。
2.文字本身的大小不兼容。同样是font-size:14px的宋体文字，在不同浏览器下占的空间是不一样的，ie下实际占高16px，下留白3px，ff下实际占高17px，上留白1px，下留白3px，opera下就更不一样了。
解决方案：给文字设定 line-height 。确保所有文字都有默认的 line-height 值。这点很重要，在高度上我们不能容忍1px 的差异。
3. ff下容器高度限定，即容器定义了height之后，容器边框的外形就确定了，不会被内容撑大，而ie下是会被内容撑大，高度限定失效。所以不要轻易给容器定义height。
4. 还讨论内容撑破容器问题，横向上的。如果float 容器未定义宽度，ff下内容会尽可能撑开容器宽度，ie下则会优先考虑内容折行。故，内容可能撑破的浮动容器需要定义width。
5. 浮动的清除，ff下不清除浮动是不行的。
6. mirror margin bug，当外层元素内有float元素时，外层元素如定义margin-top:14px，将自动生成margin-bottom:14px。padding也会出现类似问题，都是ie6下的特产，该类bug 出现的情况较为复杂，远不只这一种出现条件，还没系统整理。解决方案：外层元素设定border 或 设定float。
7. 吞吃现象，限于篇幅，我就不展开了。还是ie6，上下两个div，上面的div设置背景，却发现下面没有设置背景的div 也有了背景，这就是吞吃现象。对应上面的背景吞吃现象，还有滚动下边框缺失的现象。解决方案：使用zoom:1。这个zoom好象是专门为解决ie6 bug而生的。
8. 注释也能产生bug~~~“多出来的一只猪。”这是前人总结这个bug使用的文案，ie6的这个bug 下，大家会在页面看到猪字出现两遍，重复的内容量因注释的多少而变。解决方案：用“<!–[if !IE]> picRotate start <![endif]–>”方法写注释。
9. <li/>里加 float <div/>，这是一个典型的，棘手的兼容问题，希望引起大家正视 ，给li 不同的属性会有不同的解释效果，ff下的解释稍可理解，ie6下的解释会让你摸不着头脑，由于问题的复杂性，将另起一文专门讨论该问题。在《ul使用心得》一文里有相关成果，却没给出问题解决的过程。
10. img下的留白。解决方案：给img设定 display:block。
11. 失去line-height。<div style=”line-height:20px”><img />文字</div>，很遗憾，在ie6下单行文字 line-height 效果消失了。。。，原因是<img />这个inline-block元素和inline元素写在一起了。解决方案：让img 和文字都 float起来。
12. 链接的hover状态。a:hover img{width:300px} 我们想让鼠标hover时，链接里包含的图片宽度变化，可惜在ie6下无效，ie7、ff下有效。
13. 非链接的hover状态。div:hover{} 这样的样式ie6是不认的，在ie7、ff下才有效果。
14. ie下overflow:hidden对其下的绝对层position:absolute或者相对层position:relative无效。解决方案：给overflow:hidden加position:relative或者position:absolute。另，ie6支持overflow-x或者overflow-y的特性，ie7、ff不支持。
15. ie6下严重的bug，float元素如没定义宽度，内部如有div定义了height或zoom:1，这个div就会占满一整行，即使你给了宽度。float元素如果作为布局用或复杂的容器，都要给个宽度的。
16. ie6下的bug，绝对定位的div下包含相对定位的div，如果给内层相对定位的div高度height具体值，内层相对层将具有100%的width值，外层绝对层将被撑大。解决方案给内层相对层float属性。
17. ie6下的bug，<head></head>内有<base target=”_blank”/>的情况下，position:relative层下的float层内文字无法选中。
18. 终于来了个ff的缺点。width:100%这个东西在ie里用很方便，会向上逐层搜索width值，忽视浮动层的影响，ff下搜索至浮动层结束，如此，只能给中间的所有浮动层加width:100%才行，累啊。opera这点倒学乖了跟了ie。
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.但是了解一些常见的兼容性问题还是可以帮助我们 ...
随机推荐
- vue项目的elementui的form表单label的对齐方式和 el-date-picker 的长度设置
1.先按照官网的 :label-position 属性玩了一下毫无效果:发现单独使用这个属性是无效的,必须和 label-width 属性一起使用才生效: 如: <el-form :mod ...
- 【原创】Linux虚拟化KVM-Qemu分析（四）之CPU虚拟化（2）
背景 Read the fucking source code! --By 鲁迅 A picture is worth a thousand words. --By 高尔基 说明: KVM版本:5.9 ...
- 安装mariadb/mysql 连接失败问题
在linux下安装mariadb会出现一系列问题 问题1->服务器端不需要用户名密码就可登陆数据库 问题2->php使用mysql不能连接数据库 访问受限 问题3->navicate ...
- Linux系统安装JDK1.8
2020最新Linux系统发行版ContOS7演示安装JDK. 为防止操作权限不足,建议切换root用户,当然如果你对Linux命令熟悉,能够自主完成权限更新操作,可以不考虑此推荐. 更多命令学习推荐 ...
- day15 Pyhton学习
迭代器 掌握for循环 实际上for循环的本质,就是将一个可迭代的变成迭代器 每一次从中取值都相当于执行了一次next 如果是迭代器,那么只能取一次值 生成器 - 本质就是迭代器 生成器函数(返回值是 ...
- day22 函数整理
# 1.计算 年月日时分秒 于现在之间差了多少 格式化时间 # 现在 # 某一个年月日时分秒 参数 # import time # def get_time(old_t,fmt = '%Y-%m-%d ...
- 加密sqlite3数据库文件
目录 EncryptSqlite3 实现原理 使用方法 不足之处 GitHub地址 EncryptSqlite3 加密sqlite3数据库,产生的数据库文件别人打不开. 实现原理 在写入文件前对每个字 ...
- linux(centos8): 临时关闭/永久关闭交换分区swap？
一,为什么要关闭swap? 1,swap的用途? swap 分区就是交换分区,(windows平台叫虚拟内存) 在物理内存不够用时, 操作系统会从物理内存中把部分暂时不被使用的数据转移到交换分区, 从 ...
- centos8平台使用nethogs基于进程监控网络流量
一,nethogs的作用: 按进程或程序实时统计网络带宽使用率 我们查看流量的占用时,知道来源的ip.访问的端口,还不足以帮我们确认到进程, 而nethogs则可以让我们查看每个进程所占用的流量带宽 ...
- Ambari仓库安装教程
Ambari仓库安装教程 如果用户需要后续使用Ambari server进行安装Hadoop则必须搭建一个内部的yum源,否则直接下载速度将会很慢,当然该服务仅要搭建一个即可,可以一直使用. 一.Ce ...