web前端 兼容性问题
1:position属性使用过多或使用位置不恰当引起滚动时页面错乱
浏览器环境:ie7
position:relative;
网页上最直接表现就是极具破坏性的滚动错位,问题产生来自ie7自身渲染解析出错;这个问题的解决方案没有具体的代码,尽量避免在过多层级中使用该属性,绝对禁止为无需要无作用元素添加该属性,如tr、td等
2: 跨浏览器的CSS透明度
.transparent {
opacity: 0.7;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
filter: alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
3.浏览器兼容——常用的css hack
(1).title{ height:200px;
*height:200px;
_height:200px; }
(2).title{ height:200px;
*height:200px !important;
*height:200px; }
(3).title{ height:200px; }
*html.title{ height:200px;}
*+html.title{ height:200px;}
4.经常遇到的浏览器的兼容性有哪些?原因,解决方法是什么,常用hack的技巧 ?
* png24位的图片在iE6浏览器上出现背景,解决方案是做成PNG8.
* 浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。
* IE6双边距bug:块属性标签float后,又有横行的margin情况下,在ie6显示margin比设置的大。
浮动ie产生的双倍距离 #box{ float:left; width:10px; margin:0 0 0 100px;}
这种情况之下IE会产生20px的距离,解决方案是在float的标签样式控制中加入 ——_display:inline;将其转化为行内属性。(_这个符号只有ie6会识别)
渐进识别的方式,从总体中逐渐排除局部。
首先,巧妙的使用“\9”这一标记,将IE游览器从所有情况中分离出来。
接着,再次使用“+”将IE8和IE7、IE6分离开来,这样IE8已经独立识别。
css
.bb{
background-color:#f1ee18;/*所有识别*/
.background-color:#00deff\9; /*IE6、7、8识别*/
+background-color:#a200ff;/*IE6、7识别*/
_background-color:#1e0bd1;/*IE6识别*/
}
* IE下,可以使用获取常规属性的方法来获取自定义属性,
也可以使用getAttribute()获取自定义属性;
Firefox下,只能使用getAttribute()获取自定义属性。
解决方法:统一通过getAttribute()获取自定义属性。
* IE下,even对象有x,y属性,但是没有pageX,pageY属性;
Firefox下,event对象有pageX,pageY属性,但是没有x,y属性。
* 解决方法:(条件注释)缺点是在IE浏览器下可能会增加额外的HTTP请求数。
* Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,
可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决。
超链接访问过后hover样式就不出现了 被点击访问过的超链接样式不在具有hover和active了解决方法是改变CSS属性的排列顺序:
L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}
web前端 兼容性问题的更多相关文章
- Web前端兼容性指南
一.Web前端兼容性问题 一直以来,Web前端领域最大的问题就是兼容性问题,没有之一. 前端兼容性问题分三类: 浏览器兼容性 屏幕分辨率兼容性 跨平台兼容性 1.浏览器兼容性问题 第一次浏览器大战发生 ...
- web前端兼容性问题总结
1. HTML对象获取问题 FireFox:document.getElementById("idName");ie:document.idname或者document.get ...
- web前端兼容性整理+完善
[技巧类] 1.对一些标签统一规范. 2.padding,marign,height,width 写好标准头 <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1 ...
- web前端兼容性问题
传送门:https://www.cnblogs.com/zhoudawei/p/7497544.html
- web前端开发浏览器兼容性 - 持续更新
浏览器兼容性问题又被称为网页或网站兼容性问题:不同浏览器内核及所支持的html等网页语言标准不同,不同客户端环境(如分辨率不同)造成实际显示效果未能达到预期理想效果 首先我们来看一下目前市面上常见的一 ...
- Web前端页面的浏览器兼容性测试心得(二)搭建原汁原味的IE8测试环境
如果你做的页面被老板或PM要求兼容IE8,你就值得同情了.IE8不支持HTML5,在2017年的前端界,开发者不涉及HTML5标准简直寸步难行.然而,有一个可怕的事实客观存在,那就是IE8是Win7系 ...
- web前端开发中的浏览器兼容性总结
1.居中问题 div里的内容,IE默认为居中,而FF默认为左对齐,可以尝试增加代码margin: 0 auto; 2.高度问题 两上下排列或嵌套的div,上面的div设置高度(height),如果di ...
- 也许你需要点实用的-Web前端笔试题
之前发的一篇博客里没有附上答案,现在有空整理了下发出来,希望能帮助到正在找工作的你,还是那句话:技术只有自己真正理解了才是自己的东西,共勉. Web前端笔试题 Html+css 1.对WEB标准以及w ...
- web前端面试总结
本文由我收集总结了一些前端面试题,初学者阅后也要用心钻研其中的原理,重要知识需要系统学习.透彻学习,形成自己的知识链.万不可投机取巧,临时抱佛脚只求面试侥幸混过关是错误的!也是不可能的! 前端还是一个 ...
随机推荐
- 电子工程师名片——FAT16文件系统(转)
源:电子工程师名片——FAT16文件系统 从8月8号开始,连续一个月利用每天下班时间和周末的时间终于初步完成了一个电子工程师的电路板名片,就像U盘一样,不过这个FLASH只有64KB的大小,用的单片机 ...
- Linux启动时显示Grub命令行及修改
1.在启动Linux系统时,如果/boot/grub/grub.cfg文件损坏或者不存在时,启动Linux时,就会有Grub命令行的提示. 如下操作,将系统自带的grub.cfg文件改名.重新启动系统 ...
- c++异常处理第四篇---不使用try catch语句,使用Loki::ScopeGuard
转载:神奇的Loki::ScopeGuard 2011-07-05 12:52:05 分类: C/C++ 转载:http://blog.csdn.net/fangqu/article/details/ ...
- Crazyflie笔记五: CRTP 实时通信协议(一)(转)
源:Crazyflie笔记五: CRTP 实时通信协议(一) 这里详细介绍了 Crazyflie 的 CRTP实时通信协议的相关内容,由于内容很长,分几篇博文来讲述.这里是第一节内容.欢迎交流:301 ...
- 128階數的Shunt音量控制器
源:128階數的Shunt音量控制器 紅外線遙控 - 256階Shunt音量及控制及音源 選擇器
- iOS开发——关于开发者账号引发的血案
这里不介绍怎么申请开发者账号,那个网上的教程太多了.这里讲点有意思的. 如果你们公司比较,怎么说呢,呵呵?管理层不懂开发,不管事,申请开发者账号的人员又比较小白,或者别有用心,用私人邮箱来申请,申请的 ...
- iOS越狱包 分类: ios相关 app相关 2015-06-10 10:53 152人阅读 评论(0) 收藏
编译完了的程序是xxx.app文件夹,我们需要制作成ipa安装包,方便安装 找一个不大于500*500的png图片(程序icon图标即可),改名为:iTunesArtwork,注意不能有后缀名. 建立 ...
- iReport折线图
1.拖动组件面板chart到Summary 2.右击-->chart data 单出 3. 4.X轴和Y轴必须是数字 series:系列 连续,串联 category:类型.部门. ...
- 微信小程序登录
一. 小程序不支持cookie会话 1. 通过传递与检验3rd_session来保持会话 2. 3rd_session可以执行'`head -n 80 /dev/urandom | tr -dc A- ...
- IOS开发-OC学习-MD5加密
MD5的全称是Message-Digest Algorithm 5. MD5加密算法为现在应用最广泛的哈希算法之一,该算法广泛应用于互联网网站的用户文件加密,能够将用户密码加密为128位的长整数.数据 ...