leo_logic

浏览器兼容总结
2018/11/27更新:扩展:①js解决事件对象代码兼容性问题document.onmousemove=func...
扫描右侧二维码阅读全文
25
2018/09

浏览器兼容总结


2018/11/27更新:
扩展:
①js解决事件对象代码兼容性问题

document.onmousemove=function(e){
  e=e || window.event; //js解决事件对象代码兼容性问题 (window.event针对IE9以下浏览器)
  var x=e.pageX
  var y=e.pageY
}

浏览器兼容问题引起的矛盾:同一代码,不同浏览器解析效果不同;而我们希望用户使用任何浏览器都能够看到同一相同的网页。
当然程序员自身技术、细心程度也会引起问题,例如:设计精益求精类型和耦合性型

前提:针对程序员代码自省:

①Web标准以及W3C

百度百科:Web标准是由万维网联盟(W3C)制订的,WEB标准的产生,网页内容能被更多的用户所访问到,文件下载和页面显示速度更快,所有页面都能提供适合打印的版本,网页开发人员开发更快捷,代码更易于维护,提高了搜索引擎的精确性,提高了网站的易用性。

  • 需要注意的代码标准有:

    标签必须闭合(如:<br />)
    小写元素和属性名,与HTML不一样,XHTML大小写是敏感的
    标签都必须合理嵌套(如:<div><span></span></div>)
    属性值必须加引号(如:<height="100">)
    CSS样式表一定要放在<head></head>之间
    特殊符号用编码表示(如:小于号(<),并不是标签的一部分,需要用编码&lt;表示。)
    所有属性赋值,XHTML规定所有属性都必须有一个值,没有值的就重复本身
    在注释中不使用--符号
    

②五大主流浏览器内核

浏览器内核主要指的是浏览器的渲染引擎,渲染引擎决定了浏览器如何加载和显示网页的内容以及信息。我们主要用于测试的浏览器都有:Chrome、Firefox、Opera、Safari、IE。

Chrome浏览器内核:统称为Chromium内核或Chrome内核,以前是Webkit内核,现在是Blink内核(Google和Opera Software共同研发);
Firefox:geoko内核,Mozilla自己开发的一套开放源代码、以C++编写的渲染引擎。
Opera浏览器内核:最初是自己的Presto内核,后来是Webkit,现在是Blink内核(Google和Opera Software共同研发);
Safari:webkit内核,开源的浏览器引擎,源自于Linux平台上的一个引擎,经过Apple公司的修改可以支持Mac与Windows平台。
ie:Trident内核,也可以称为IE内核;

③标准模式(Standards Mode)和怪异模式 (Quirks Mode)

  • 在W3C标准出台以前,浏览器在对页面的渲染上没有统一规范,产生了差异(Quirks mode或者称为Compatibility Mode);由于W3C标准的推出,浏览器渲染页面有了统一的标准(CSScompat或称为Strict mode也有叫做Standars mode)。

    页面的开头<!DOCTYPE>声明,是告诉浏览器选择哪个版本的HTML,对于渲染模式的选择,浏览器是根据DTD的声明。如果网页中有DTD标准文档的声明,那浏览器会按照标准模式来渲染网页;如果网页没有DTD声明或者HTML4以下的DTD声明,那浏览器就按照自己的方式渲染页面,页面进入怪异模式。
    

④HTML语义化

简单的看,就是直接能通过标签直接明白标签要表达什么含义,因为使用div不能直观的看出标签要干嘛!语义化标签,对程序员和搜索引擎都非常友好!
作用:SEO、代码维护、不同设备兼容性强

⑤CSS选择器优先级

关于优先级首先想到的是!important,CSS中的!important一般都是用于对低版本的除了iE 6 ,用来做hack的,后面缀上了!important的css语句,让浏览器首选执行这个语句,因为css有继承的样式,加上!importanrt可以覆盖父级的样式。 IE6不认识它的,IE7和别的浏览器中可以用,用来处理浏览器的兼容性!

  • CSS的基本选择器:

    id选择器(用DOM的id申明)
    类选择器(用一个样式类名申明)
    标签选择器(用HTML标签申明)
    属性选择器(用DOM的属性申明)
    行内元素 < id选择器 < 类选择器/属性选择器 < 标签选择器
    

兼容性问题及解决部分

问题一:盒子模型的margin和padding不统一

解决方案: 清除不同浏览器边距样式
*{
   margin:0px;
   padding:0px;
}

问题二:页面错位

问题定位:①空格占用不同,导致页面错位
            - utf-8编码默认是英文,对中文处理不太友好,但对宋体的处理非常棒,宋体的utf-8编码两个空格一个汉字,其他字体(大多)的utf-8三个空格才一个汉字;但是gbk编码下是2个空格一个汉字。
解决方案:①增加或减少&nbsp

问题三:IE6~IE9兼容性问题

IE条件注释 (conditional comment) 是于HTML源码中被IE有条件解释的语句。条件注释可被用来向IE提供及隐藏代码,注意:只有 IE9以下的浏览器才能识别这种语法,其他浏览器仅仅认为是普通注释。

<!--[if IE 6]>
    <p>IE6下 这句生效,在其他浏览器下认为是普通注释</p>
<![endif]-->
<!--[if !IE]><!-->
    <script>alert("在 IE 下条件语法生效,但script不执行。在非 IE 下上下两句都被当做注释所以当前 script 会执行");</script>
<!--<![endif]-->
<!--[if IE 8]>
    <link href="ie8only.css" rel="stylesheet">
<![endif]-->

通过IE浏览器的bug来认识他们(css hack)

.box{
   color: red;
   _color: blue; /*只有ie6认识*/
   *color: pink; /*只有ie67认识*/
   color: yellow\9;  /*ie浏览器都能识别*/
}

问题四:图片默认有间距

多个img标签有间距,而*{margin:0px;padding:0px}无效时,可以使用使用float属性为img标签布局

问题五:多核浏览器(内核可选)兼容性

国内如360浏览器极速兼容分别采用谷歌和IE内核,这时只需要告诉浏览器选用那个内核即可
若页面需默认用极速核,增加标签:<meta name="renderer" content="webkit">
若页面需默认用ie兼容内核,增加标签:<meta name="renderer" content="ie-comp">
若页面需默认用ie标准内核,增加标签:<meta name="renderer" content="ie-stand">

总结:

  • 越少的浮动,就会越少的代码,会有更灵活的页面,会有扩展性更强的页面。得少用margin+div的方式,昨天晚上和李老师交流了,老师说position很常用!
  • 列布局,横列纵列尽量用无序列表<ul><li></li></ul>布局;无序列表去除小圆点list-style:none;无序列表转为行内display:inline; 这样一定程度上避免div+css布局中对不齐的情况
Last modification:November 27th, 2018 at 10:55 am
If you think my article is useful to you, please feel free to appreciate

Leave a Comment