TypechoJoeTheme

快把钟哥带走

zyz

网站页面
标签搜索

06、HTML&CSS-兼容

zyz
2018-04-12
/
0 评论
/
662 阅读
/
正在检测是否收录...
04/12

一、为什么会出现浏览器兼容问题?

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

二、浏览器核心

浏览器最关键的部分就是它的渲染引擎,也即是浏览器的”内核”

三、主流浏览器市场份额

四、五大浏览器内核

  • 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 , 是一个开源项目;
  • Presto: 代表作品Opera ,Presto是由Opera Software开发的浏览器排版引擎。它也是世界上公认的渲染速度最快的引擎;
  • Blink : 由Google和Opera Software开发的浏览器排版引擎,2013年4月发布;

六、CSS Bug、CSS Hack、filter

  • CSS Bug: CSS样式在各浏览器中解析不一致的情况,或者说CSS样式在浏览器中不能正确显示的问题称为CSS bug.
  • CSS Hack: CSS中,Hack是指一种兼容CSS在不同浏览器中正确显示的技巧方法,因为它们都属于个人对CSS代码的非官方的修改,或非官方的补丁。有些人更喜欢使用patch(补丁)来描述这种行为。
  • Filter:表示过滤器的意思,它是一种对特定的浏览器或浏览器组显示或隐藏规则或声明的方法。本质上讲,Filter是一种用来过滤不同浏览器的Hack类型。
  • 备注: 解决CSS bug的方式一种叫CSS Hack,还有一种叫Filter;使用Hack带来的一些副作用降低了CSS代码的可读性,增加了代码的负担;

设计CSS Hack和 Filter通常有两种方法:

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

七、IE常见CSS解析Bug及Hack

1、margin无效(IE5及以下)

  • 最外层IDV在IE浏览器中水平居中,设置margin: 0 auto;无效;
    - hack: body中还需要添加text-align: center;

2、图片间隙

  • div中的图片间隙(该bug出现在IE6以及更低版本中),在div中插入图片时,图片会将div下方撑大3个像素;
    - hack1: 将 </div>和 <img> 写在同一行;
    - hack2: 将<img>转为块元素,即是添加display: block属性;
  • dt,li图片间隙(图片列表浮动时)
    - hack: 将<img>转为块元素,即是添加display: block属性;

3、双倍浮向(双倍边界)

  • 当IE6以及更低版本浏览器在解析浮动时,会错误的把浮向边界加倍显示;(即是有float: left; margin: 0 10px;)
    - hack: 给浮动元素添加声明,display: inline;

4、默认高度(例如div)

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

5、按钮元素默认大小不一

  • 各浏览器中按钮元素大小不一致
    - hack1: 统一大小
    - hack2: input外边套一个标签,在这个标签中写按钮的样式,把input的边框去掉; 
    - hack3: 如果这个按钮是一个图片,直接把图片作为按钮的背景图即可;

6、百分比bug

  • 在IE7以及更低版本中,在解析百分比时,会按四舍五入方式计算从而导致50%加50%大于100%的
    - hack: 给右边的浮动元素添加声明:
        clear: right; // 清除右浮动

    - 清除浮动:
      clear: right; // 清除右浮动 
      clear: left;  // 清除左浮动
      clear: both;  // 清除两边的浮动

7、透明属性

  • IE浏览器写法: filter: alpha(opacity=value); (value取值范围0~100)
  • 兼容其他浏览器写法: opacity: value; (value取值范围0~1)

8、按钮解析边框问题

  • 对于所有浏览器都会存在,按钮解析边框的问题
> 设置一个div,一个按钮,一个文本输入框
> 三个高度宽度都一样,都将边框去掉,设置为左浮动
> 三个元素显示都是一致的
> 问题展示: 三个元素分别加上1px的边框,此时按钮显示会出现差异
原因: 
    按钮不管是否添加边框,它都是存在的,而其他元素添加边框的时,是添加在元素之外的,这也就导致其他元素都会相对应变大,而按钮却没有任何变化;
解决: 
    之后出现按钮和文本框一起出现且高度是一致时,要么按钮多2px,要么文本框少写2px;

9、列表bug(IE6以及更低版本中的浏览器中)

    bug1: 当给li中的a添加float: left; li没有设置浮动属性,会出现垂直效果;
    hack: 给li设置浮动效果即可;

    bug2: 当给li中的a转为块元素,并设置固定高度时,li是有浮动的情况下,会出现垂直效果;
    hack: 给a标签添加浮动即可;

    bug3: 当给li中的a转为块元素,并设置固定高度时,且有添加浮动效果,就会出现阶梯状效果;
    hack: 给li中的添加浮动(即li和a都需要添加浮动);

    备注: 
      都不设置宽度,都通过给a设置padding将li撑开;

10、边框问题

在IE6以及更低版本浏览器中,如果想要去掉默认边框,需要将border属性值设置为0,即可以兼容多个浏览器;

  bug: IE6以及更低版本浏览器中,border: none;去除不了边框;
  hack: 直接使用border: 0;
赞(0)
评论 (0)