zoukankan      html  css  js  c++  java
  • 浏览器兼容性

    浏览器兼容性

    一、认识浏览器

    1)主流浏览器
    Internet explorer、Safari、Mozilla Firefox、Google chrome、opera、百度、360、搜狗、傲游

    2)最早的浏览器
    Mosaic/Netscape navigator(网景领航者)(1994-2008)简称NN

    3)浏览器战争

    • 第一次浏览器大战发生在上个世纪90年代,微软发布了它的IE浏览器,和网景公司的Netscape navigator浏览器大打出手。
    • 第二次浏览器大战发生在20世纪。战争产物:Internet explorer 9

    二、五大浏览器内核

    五大浏览器内核

    • Trident(MSHTML)(三叉戟;三叉线;三尺鱼叉)
    • Gecko(壁虎)
    • Presto(迅速的)
    • Webkit(Safari内核,chrome内核原型,它是苹果公司自己的内核,也是苹果的Safari浏览器使用的内核)
    • Blink(由Google和opera software开发的浏览器排版引擎)。

    五大浏览器内核代表作品

    • Trident: IE、maxthon(遨游)、腾讯、Theworld世界之窗、360浏览器。
      代表作品IE,因为IE捆绑在Windows中,所以占有极高的市场份额,又称IE内核或mshtml,此内核只能应用于Windows平台,且是不开源的。

    • Gecko:代表作品Mozilla Firefox是开源的,它的最大优势是跨平台,能在Microsoft Windows、Linux和macOS x等主要操作系统上运行。

    • Webkit:代表作品Safari、chrome、遨游浏览器3,是一个开源项目。

    • Presto:代表作品Opera(前内核),Presto是由Opera Software开发的浏览器排版引擎。它也是世界上公认的渲染速度最快的引擎。Opera现已改用Google chrome的Blink内核。

    • Blink:由Google和opera software开发的浏览器排版引擎,2013年4月发布。

    三、关于浏览器兼容的一些概念和原因

    为什么会出现浏览器兼容问题?
    由于各大主流浏览器由不同的厂家开发,所用的核心架构和代码也很难重和,这就为各种莫名其妙的bug(代码错误)提供了温床。再加上各大厂商出于自身利益考虑而设置的种种技术壁垒,都让css应用起来比想象得要麻烦。浏览器的兼容问题是我们必须去克服的。

    css bug、css hack和filter

    • 1)css bug:css样式在各浏览器中解析不一致的情况,或者说css样式在浏览器中不能正确显示的问题称为css bug.
    • 2)css hack:css中,hack是指一种兼容css在不同浏览器中正确显示的技巧方法,因为它们都属于个人对css代码的非官方的修改,或非官方的补丁。有些人更喜欢使用patch(补丁)来描述这种行为。
    • 3)Filter:表示过滤器的意思,它是一种对特定的浏览器或浏览器组显示或隐藏规则或声明的方法。本质上讲,filter是一种用来过滤不同浏览器的hack类型。

    *使用hack带来的一些副作用
    降低了css代码的可读性。增加了代码的负担。

    *使用css hack和filter通常有两种方法:

    • 1)一种是利用浏览器自身的bug,来隐藏或显示样式或声明;
    • 2)另一种是浏览器对css支持的不完善,如对某些规则或语法还没有形成支持,来隐藏或显示样式。

    四、常见的cssbug和css hack

    1) 图片间隙----针对所有块元素容器

    • A)div中图片间隙(该bug出现在所有浏览器中)
      描述:在div中插入图片时,图片会将div下方撑大三像素。
      hack:将<img>转为块状元素,给<img>添加声明:display:block;
    • B)当图片横着排的时候,图片和图片之间存在一定的间距
      hack:img{float:left;}

    2) dt,li中图片间隙

    • hack:将<img>转为块状元素,给<img>添加声明:display:block;

    3)双倍浮向(双倍边距)(只有ie6出现)

    • 描述:在ie6中,一个居左(或居右)浮动的元素放置进一个容器盒(box),并在浮动元素上使用了左边距(或右边距)在ie6内便产生双倍边距。
    • hack:给浮动元素添加声明:display:inline;---->转行内元素

    4)图片在ie浏览器上有蓝色的边框(加在a标签里)

    • hack:给img的边写成0;img{border:0;}

    5)默认高度(ie6、ie7)

    • 描述:在ie6及以下版本中,部分块元素拥有默认高度(低于18px高度)
    • hack1:给元素添加声明:font-size:0;
    • hack2:给元素添加声明:overflow:hidden;

    6)表单元素距离顶部间距不一致(ie,moz,c,o,s)

    • 描述:表单元素距离顶部的距离不一致
    • hack:给表单元素添加声明:float:left;

    7)按钮元素默认大小不一

    • 描述:各浏览器中按钮元素大小不一致
    • hack:统一大小/(用a标记模拟)

    8)百分比bug

    • 描述:在ie6及以下版本中解析百分比时,会按四舍五入方式计算从而导致50%加50%大于100%的情况。(也会受系统影响)
    • hack:给右面的浮动元素添加声明:clear:right;

    9)鼠标指针bug

    • 描述:cursor属性的hand属性值只有子啊ie9以下浏览器识别,其他浏览器不识别该声明,cursor属性的pointer属性值ie6.0以上版本及其他内核浏览器都识别该声明。
    • hack:如统一某元素鼠标指针形状为手型,
      应添加声明:cursor:pointer;

    10)子元素没设置任何浮动,设置了margin-top属性后,会错误的把margin-top的属性添加给父元素

    • hack1:给父元素添加overflow:hidden;声明。
    • 如果子元素设置了浮动属性也不会出现这个问题

    11)当给li中的a转成block;并且有height,并有float的时候,li中没设置浮动会出现阶梯显示,hack:同时给li加float;

    12)Input的type类型是text的时候,提示信息用value表示,如果设置input的高度,在其他浏览器上显示的value的内容是垂直居中的,但在ie6上是在顶部的,解决的方法就是给input添加一个行高等于等它的高度。

  • 相关阅读:
    MSSQL大量数据时,建立索引或添加字段后保存更改超时该这么办
    POJ 3261 Milk Patterns (后缀数组)
    POJ 1743 Musical Theme (后缀数组)
    HDU 1496 Equations (HASH)
    694. Distinct Substrings (后缀数组)
    POJ 1222 EXTENDED LIGHTS OUT (枚举 或者 高斯消元)
    POJ 1681· Painter's Problem (位压缩 或 高斯消元)
    POJ 1054 The Troublesome Frog (hash散列)
    HDU 1716 排列2
    HDU 4405 Aeroplane chess (概率DP & 期望)
  • 原文地址:https://www.cnblogs.com/zhuxiaopeng/p/6693472.html
Copyright © 2011-2022 走看看