金三银四,那浏览器兼容你知多少?
为什么会存在浏览器兼容问题?
首先要了解兼容,我们先得了解一下为什么会存在浏览器兼容问题。在各大浏览器厂商的发展过程中,它们对web的标准各有不同的实现,标准不同存在差异所以产生兼容性的问题。
浏览器内核
五大浏览器内核以及各内核代表作品:
- Trident: IE、Maxthon(遨游)、Theworld(世界之窗)
- Gecko: Mozilla Firefox
- Webkit: Safari、Chrome
- Presto: Opera
- Blink: 由Google和Opera Softwase开发的浏览器排版引擎
一些概念
CSS BUG
Css样式在各浏览器中解析不一致的情况,或者说Css样式在浏览器中不能正确显示的问题称为CSS Bug
CSS hack
CSS中,hack是指一种兼容css在不同浏览器中正确显示的技巧方法,因为他们都属于个人对css代码的非官方的修改,或非官方的补丁。有些人更喜欢使用patch(补丁)来描述这种行为。
Filter
它是一种对特定的浏览器或浏览器组显示或隐藏规则或声明的方法。本质上讲,filter是一种用来过滤不同浏览器的hack类型。
过滤器(filter)
ps:过滤器可能这个说法有点不太正确,也可以说是浏览器标识符!
- _下划线过滤器
当一个属性前面增加一个下划线后,由于符合标准的浏览器不能识别带有下划线的属性而忽略了这个声明。但是ie6及更低版本浏览器会继续解析。 语法:选择器{_属性:属性值;} 此方法是区分ie6浏览器和其他浏览器的方法
- !important关键字过滤器
它表示所附加的声明具有最高优先级的意思,被浏览器优先显示(ie6不识别此写法) 语法:选择符{属性:属性值!important;}
- *属性过滤器
当一个属性前面加了*后,该属性能被ie7及以下浏览器识别,其他浏览器忽略该属性的作用 语法:选择器{*属性:属性值;}
- +属性过滤器
当一个属性前面加了+后,该属性能被ie7及以下浏览器识别,其他浏览器忽略该属性的作用 语法:选择器{+属性:属性值;}
- *+属性过滤器
当一个属性前面加了*+后,该属性能被ie7浏览器识别,其他浏览器忽略该属性的作用 语法:选择器{*+属性:属性值;}
- \9
ie版本识别,其他浏览器不识别 **语法:选择符{属性:属性值\9;} **
- \0
ie8及以上浏览器识别,其他浏览器不识别 语法:选择符{属性:属性值\0;}
- -moz-
Firefox浏览器识别,其他浏览器不识别
- -webkit-
webkit内核浏览器识别,其他浏览器不识别
- -o-
Opera浏览器识别,其他浏览器不识别
- -ms-
ie浏览器识别,其他浏览器不识别
常见的浏览器兼容问题以及解决方法
1)、图片有边框bug
描素:当图片加在ie上会出现边框
hack:给图片加border:0;或者border:0 none;
2)图片间隙
描素:div中的图片间隙bug
在div中插入图片时图片将div下方撑大大约三像素
hack1:将与写在一行上; hack2:将转换为块级元素,给添加声明display:block;
3)双倍浮向(双倍边距)(只有ie6出现)
描素: 当ie6及更低版本浏览器在解析浮动元素时会错误的把浮动边边距(margin)加倍显示。
hack:给浮动元素添加声明:display:inline;
4)默认高度(ie6 ie7)
描述:在ie6及以下版本中,部分块元素拥有默认高度(在16px左右)
hack1:给元素添加声明:font-size:0; hack2:给元素添加声明:overflow:hidden;
5)表单元素行高对齐不一致
描素:表单元素行高对齐方式不一致
hack:给表单元素添加声明:float:left;
6)按钮元素默认大小不一
描素:各浏览器中按钮大小不一致
hack1:统一大小/(用a标记模拟) hack2:input外边套一个标签,在这个标签里写按钮的样式,把input的边框去掉 hack3:如果这个按钮是一个图片,直接把图片作为按钮的背景图即可。
7)百分比bug
描素:在ie6以及以下版本中解析百分比时会四舍五入方式计算从而导致50%加50%大于100%的情况。(也会受系统影响)
hack:给右边的浮动元素添加声明
8)li列表的bug
(1)当父元素li有float:left;子元素a没设置浮动的情况下会出现垂直bug;
hack:给父元素li和子元素a都设置浮动
(2)当li中的a转成block;并且有height 并有float的li没设置浮动会出现阶梯显示
hack:同时给li加float
9)当前元素(父元素里面的第一个子元素)与父元素没有设置任何浮动的情况下,设置margin-top后 会错误的把margin-top加在父元素上
hack1:给父元素添加声明overflow:hidden;
hack1::给父元素的子元素添加浮动
当两个上下排列的元素,上元素有margin-bottom下面元素有margin-top:他们的中间间距不会叠加而是设置为较大值
10)鼠标指针bug
描述:cursor属性的hand属性值只有ie9以下的浏览器识别,其他浏览器不识别该声明cursor属性pointer属性值ie6以上版本及其他内核浏览器都识别该声明
hack:如统一某元素鼠标指针形状为手型,应添加声明cursor:pointer;
11)透明属性
兼容其它浏览器写法:opacity:value;(value取值0-1)
ie浏览器写法:filter:alpha(opacity=value);取值1-100(整数)
12)Html对象获取问题
FireFox:document.getElementById("idName");
ie:document.idname 或者 document.getElementById("idName").
解决办法:统一使用document.getElementById("idName");
12) event.x与event.y问题
描述: IE下event对象有x,y属性,但是没有pageX,pageY属性;
Firefox下event对象有pageX,pageY属性,但是没有x,y属性.
解决方法:使用mX(mX = event.x ? event.x : event.pageX;)来代替IE下的event.x或者Firefox下的event.pageX.
13)window.location.href问题
描述:IE或者Firefox2.0.x下,可以使用window.location或window.location.href;
Firefox1.5.x下,只能使用window.location。
解决方法:使用window.location来代替window.location.href。
14)frame问题
以下面的frame为例:
<frame src="xxx.html" id="frameId" name="frameName" />
复制代码
(1)访问frame对象:
IE:使用window.frameId或者window.frameName来访问这个frame对象, frameId和frameName可以同名。
Firefox:只能使用window.frameName来访问这个frame对象.
另外,在IE和Firefox中都可以使用window.document.getElementById("frameId")来访问这个frame对象.
(2)切换frame内容:
在 IE和Firefox中都可以使用window.document.getElementById("testFrame").src = "xxx.html"或window.frameName.location = "xxx.html"来切换frame的内容.
如果需要将frame中的参数传回父窗口(注意不是opener,而是parent frame),可以在frame中使用parent来访问父窗口。例如:parent.document.form1.filename.value="Aqing";
15)模态和非模态窗口问题
说明:IE下,可以通过showModalDialog和showModelessDialog打开模态和非模态窗口;Firefox下则不能.
解决方法:直接使用window.open(pageURL,name,parameters)方式打开新窗口。
如果需要将子窗口中的参数传递回父窗口,可以在子窗口中使用window.opener来访问父窗口.
例如:
var parWin = window.opener;
parWin.document.getElementById("Aqing").value = "Aqing";
复制代码
ps:没有整理完整后续在这里更新!
转载于:https://juejin.im/post/5c9dc5bce51d4576552555f7
金三银四,那浏览器兼容你知多少?相关推荐
- 金三银四的面试黄金季节,Android面试题来了!
金三银四的跳槽季节,你准摆好了吗? 首先我们分享一个Android知识图谱. 下面是一些面试官基本必问的问题,请一定要去了解! 基础知识 – 四大组件(生命周期,使用场景,如何启动) java基础 – ...
- 金三银四,磨砺锋芒;剑指大厂,扬帆起航(2020年最全大厂WEB前端面试题精选)上
引言 元旦匆匆而过,2020年的春节又接踵而来,大家除了忙的提着裤子加班.年底冲冲冲外,还有着对于明年的迷茫和期待!2019年有多少苦涩心酸,2020年就有更多幸福美好,加油,奥利给!怀着一颗积极向上 ...
- 金三银四求职季,前端面试题小梳理(HTML、CSS、JS)
好久没写学习记录,最近太多事,又到一年求职季,都说金三银四求职季,自己也做一下最近学习的一些前端面试题梳理,还是个小白,写的不对请指正,不胜感激. HTML篇 html语义化 用语义化的代码标签书写, ...
- 金三银四,磨砺锋芒;剑指大厂,扬帆起航(2020年最全大厂WEB前端面试题精选)下
引言 元旦匆匆而过,2020年的春节又接踵而来,大家除了忙的提着裤子加班.年底冲冲冲外,还有着对于明年的迷茫和期待!2019年有多少苦涩心酸,2020年就有更多幸福美好,加油,奥利给!怀着一颗积极向上 ...
- 金三银四求职季,APP面试题放送
进入金三银四,很多小伙伴有被动跳槽的打算,所以更新一些APP面试题,希望能帮到大家,四千多字长文分享,建议收藏! Web 端测试和 App 端测试有何不同? ① 系统架构方面 Web 项目,b/s架构 ...
- 2023史上最全软件测试工程师常见的面试题总结 备战金三银四
在这里我给大家推荐一套专门讲解软件测试简历,和面试题的视频,实测有效,建议大家可以看看! 春招必看已上岸,软件测试常问面试题[全网最详细,让你不再踩坑]_哔哩哔哩_bilibili春招必看已上岸,软件 ...
- 金三银四求职季来了!分享几道最常见的app面试题,帮助您更好准备面试求职!
目录:导读 引言 一.Web 端测试和 App 端测试有何不同? 二.App是如何测试的? 三.app闪退的可能原因? 四.给你一个登录页面,你要如何测试? 五.测试过程中遇到app出现crash或者 ...
- 2021春招,备战金三银四,软件测试面试宝典全家桶(含答案)!
前言 本文章主要为备战金三银四的同仁准备,帮助您更好的应对面试官提问的同时并加强巩固前面所学知识,其中包括以下几类内容:测试技术类面试题(理论面试题(必背+拓展+测试用例).数据库面试题.自动化及工具 ...
- 保驾护航金三银四,吐血整理
前言 又逢金三银四,拿到大厂的offer一直是程序员朋友的一个目标,我是如何拿到大厂offer的呢,今天给大家分享我拿到大厂offer的利器,前端核心知识面试宝典,内容囊括Html.CSS.Javas ...
- 软件测试人员如何在“金三银四”跳槽季找到理想工作?
每年的"金三银四"都是职场人跳槽的绝佳时机,很多人都蠢蠢欲动,希望能拿更高的薪资,能去更好的平台- 但同时很多人也在犹豫和观望,因为不确定自己跳槽后能否变得更好,这也成了某平台圆桌 ...
最新文章
- idea打包springboot项目为war包并运行
- linux运行shellftp上传文件,shell脚本实现ftp上传下载文件
- 论云计算机下的中小企业会计信息化建设,中小企业云会计信息化的建议论文
- 【转】妈妈告诉我的细节
- 知识驱动的主动式开放域对话系统 by 车万翔 2020/4/11
- 语音识别 卷积神经网络,卷积神经网络字符识别
- initialize php,thinkPHP中_initialize方法实例分析
- python优点是代码库支持、灵活_Google将限制Python语言的应用 开发社区热议
- 淮安万达机器人_淮安万博机器人 万达上班时间【输入网址YB7888.vip】angmi_PP视频搜索-PP视频-原PPTV聚力视频...
- win7交换机共享宽带连接上网
- 产业巨头布局移动互联网 惠普比联想棋高一筹
- 学习笔记——SRAM、DRAM、SDRAM区别
- Qt编写可视化大屏电子看板系统16-标准柱状图
- 怎样才能跳过实名认证_和平精英qq怎么跳过实名认证!老司机告诉你仅需5步
- 迅雷数据平台建设和应用案例
- 网络安全学习(千锋网络安全笔记)2--IP与基本DOS命令
- 【华为机试真题 Python实现】篮球比赛【2022 Q1 Q2 | 200分】
- win ce系统如何知道u盘正版授权_从零开始的电脑系统重装
- 【C#】跨平台UI库Avalonia的学习笔记(上)
- 提示“QQ在线状态服务尚未启用,您需要添加对方为好友才能与其进行会话”解决方法