css 兼容解决方案,CSS的常见兼容性问题解决方案
这次给大家带来CSS的常见兼容性问题解决方案,CSS常见兼容性问题的注意事项有哪些,下面就是实战案例,一起来看一下。
一、不同浏览器的标签默认的外补丁和内部顶不同
这个大家就很常见了,我们知道每个浏览器对margin和padding的处理问题很大,我们一般都会碰到这个问题,常用的解决办法就是使用通配符*来将其初始化
解决办法:*{ margin:0; padding:0;}1234
另一种方法建议大家使用的就是使用reset文件,其不仅省心外,还有的两个好处就是方便程序员的的发挥和便于发现前端代码的遗漏。
二、块属性标签float后,又有横行的margin情况下,在ie6显示margin比设置的大
我们最常用的就是div+css布局了,而div就是一个典型的块属性标签,横向布局的时候我们通常都是用div的float实现的,横向的间距设置如果用margin实现,这就是一个必然会碰到的兼容性问题。问题出现的症状就是iE6通常后面的一块会被挤下去,如果你的代码比较复杂,这个问题将很容易碰到,这是float布局中最常见的问题,
解决方案:
在float的标签样式控制中加入display:inline;将其转化为行内属性
三、cursor:hand VS cursor:pointer
firefox不支持hand,但ie支持pointer
解决方法: 统一使用pointer
四、 innerText在IE中能正常工作,但在FireFox中却不行.if(navigator.appName.indexOf("Explorer") > -1){ document.getElementById('element').innerText = "my text";
} else{ document.getElementById('element').textContent = "my text";
}12345
五、 CSS透明IE:
filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。1
FF:
opacity:0.6。1
六、css中的width和padding
在IE7和FF中width宽度不包括padding,在Ie6中包括padding.
七、FF和IE的盒子模型解释不一致导致相差2pxbox.style{ width:100; border 1px;}1234
ie理解为box.width = 100 ff理解为box.width = 100 + 1*2 = 102 //加上边框2px
八、IE与宽度和高度的问题
IE不认得min-这个定义,但实际上它把正常的width和height当作有min的情况来使。这样问题就大了,如果只用宽度和高度,正常的浏览器里这两个值就不会变,如果只用min-width和min-height的话,IE下面根本等于没有设置宽度和高度。
解决办法,我们可以让通过javascript设置。
九、超链接访问后hover样式不出现的问题
被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题,解决技巧是改变CSS属性的排列顺序: L-V-H-Aa:link{};a:visited{};a:hover{};a:active{};1234
十、form标签
这个标签在IE中,将会自动margin一些边距,而在FF中margin则是0,因此,如果想显示一致,所以最好在css中指定margin和 padding,针对上面两个问题,我的css中一般首先都使用这样的样式ul,form{margin:0;padding:0;}
十一、图片间距的问题
问题症状:几个img标签放在一起的时候,有些浏览器会有默认的间距,加了 *{margin:0;padding:0;}的通配符也不起作用。
解决方案:使用float属性为img布局
备注:因为img标签是行内属性标签,所以只要不超出容器宽度,img标签都会排在一行里,但是部分浏览器的img标签之间会有个间距。去掉这个间距使用float是正道
十二、IE6不支持fixed
解决办法
.DIV名称{height: 92px;width: 100%;position: fixed;top: 0;_position: absolute;_bottom: auto;_top:expression(eval(document.documentElement.scrollTop));}123456789
解释_是专门用来解决兼性设置的,里面还是通过eval解析javascript代码来设置javascript代码。
十三、IE个版本的hack
CSS Hack大致有3种表现形式,CSS类内部Hack、选择器Hack以及HTML头部引用(if IE)Hack,CSS Hack主要针对类内部Hack:比如 IE6能识别下划线”“和星号” * “,IE7能识别星号” * “,但不能识别下划线”“,而firefox两个都不能认识。等等
选择器Hack:比如 IE6能识别html .class{},IE7能识别+html .class{}或者*:first-child+html .class{}。等等
HTML头部引用(if IE)Hack:针对所有IE:/*类内部hack:*/
.header {_width:100px;} /* IE6专用*/
.header {*+width:100px;} /* IE7专用*/
.header {*width:100px;} /* IE6、IE7共用*/
.header {width:100px\0;} /* IE8、IE9共用*/
.header {width:100px\9;} /* IE6、IE7、IE8、IE9共用*/
.header {width:330px\9\0;} /* IE9专用*/
/*选择器Hack:*/
*html .header{} /*IE6*/
*+html .header{}/*IE7*/12345678910111213
总结:
好多兼容问题都是关于IE浏览器的,推荐大家一个关于测ie兼容性的软件IETester,里面可以测试关于IE浏览器各个版本的兼容,对于其他问题,浏览器兼容性的问题还有很多,我们在以后的学习中还会遇到,最常用的办法就是通过if语句或者三目运算符去解决它,这很有用,其余的就是个别属性存在差异,上面也讲到了一些解决办法,还是靠自己慢慢去积累吧!
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
css 兼容解决方案,CSS的常见兼容性问题解决方案相关推荐
- Mac提示app损坏、Error,Mac电脑最常见错误的解决方案
这篇文章蓝同学给大家分享一下Mac电脑上最常见错误的解决方案. 以下仅给出部分错误提示截图,类似的错误提示还有磁盘映像损坏.xxx.app有啥啥问题.... ①提示xxx.app已损坏,让你移到废纸篓 ...
- 常见的浏览器兼容性问题与解决方案——CSS篇
1.不同的浏览器的标签默认的外补丁和内补丁不同 问题症状:随便写几个标签,不加样式控制的情况下,各自的margin和padding差异较大. 碰到频率:100% 解决方案:初始化CSS的默认样式,*{ ...
- 【转】常见浏览器兼容性问题与解决方案css篇
小满语:说到兼容性问题,不得不说一下IE浏览器,尤其是IE9以前,兼容性差的要哭,来,擦擦眼泪,学习一下兼容性问题的解决方案~本篇主要是布局后加样式后导致浏览器显示不统一的情形: 所谓的浏览器兼容性问 ...
- “约见”面试官系列之常见面试题第三十六篇之CSS常见兼容性问题及解决方案(建议收藏)
CSS常见兼容性问题及解决方案: 1. 上下margin重合问题: 问题描述:相邻的margin-left和margin-right是不会重合的,但是相邻的块级元素margin-top 和margin ...
- 【海码学院】web前端基础入门CSS之常见CSS兼容问题学习笔记
一.兼容性处理要点 1.DOCTYPE 影响 CSS 处理: 2.FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important ...
- 浏览器兼容性问题解决方案之CSS,已在IE、FF、Chrome测试
最近在跟一个同学共同整理一个关于浏览器兼容性问题的文档,我们主要是找出在主流浏览器中出现哪些问题,如何解决这个问题,并给出实例.在这之前,需要明白一下几个问题. 什么是浏览器兼容问题? 所谓的浏览器兼 ...
- CSS HACK:IE6、IE7、IE8、Firefox兼容性问题解决方案
CSS HACK:IE6.IE7.IE8.Firefox兼容性问题解决方案 参考文章: (1)CSS HACK:IE6.IE7.IE8.Firefox兼容性问题解决方案 (2)https://www. ...
- 【总结】IE6,IE7,IE8,Firefox兼容的css hack 补充!
IE6,IE7,IE8,Firefox兼容的css hack 补充: .color{ background-color: #CC00FF; /*所有浏览器都会显示为紫色*/ background-co ...
- 前端浏览器常见兼容性问题及解决方案
目录 1. 最常见的:每个浏览器的默认margin,padding大小都不同,当设置定位时会有些许差异. 2. 图片默认有间距:当几个img标签放到一起时,有些浏览器会有默认间距,加上第一条的设置的通 ...
- DarkMode(2):深色模式解决方案——css颜色变量实现Dark Mode
暗黑模式实现,最初的设计,就是参考之前的主题模式.所谓多套主题/配色/皮肤,就是我们很常见的换肤功能.换肤简单的实现就是更换 css实现不同样式呈现不同肤色. 之前做不同颜色的皮肤,暗黑模式可以单做其 ...
最新文章
- Android使用Intent启动Service的Intent必须是显式的
- 【转】Android开发之数据库SQL
- 【ASP.NET】基础补习之验证控件
- vue-cli4.0+Echarts 3D
- python指定目录生成.csv文件_python文件处理-根据csv文件内容,将对应图像拷贝到指定文件夹...
- 【Computer Organization笔记09】x86 / Pentium 指令系统,MIPS 指令系统,数据通路的设计,CPU设计思路
- Visual Studio 2017 RC版发布 自带iOS模拟器
- docker from指令的含义_Docker 镜像常用命令
- QT连接PostSql (小白教程)
- 供应链运作参考模型(SCOR):一种用于改善供应链管理的模型
- 300字总结计算机flash,Flash学习心得体会范文
- 认知水平高下定义及提高认知水平的方法
- JS导出table数据到excel问题-Automation 服务器不能创建对象
- 在字符串s的第n个字符后面插入字符串t
- 人的精力是什么?如何强化精力
- Node-Red UI界面基础设计
- 如果不想当程序员,学编程有什么用?答案显而易见!
- 如何在Windows上搭建web站点,并发布到公网?1-1
- A cost-effective recommender system for taxi drivers
- Swi-Prolog借助XPCE可视化-显示图片