精华内容
下载资源
问答
  • 现象:今天运维问了我一个问题,两个不同的浏览器看到同一个数字最后...我猜测不同浏览器对toFixed函数解析不一样,可能不是单纯的四舍五入,有的可能有银行家算法(四舍六入,五奇入偶舍)。 搜索了一下,发现与我...

    现象:今天运维问了我一个问题,两个不同的浏览器看到同一个数字最后一位小数不同。

    一个浏览器是ie11,显示的是1.44。

    一个浏览器是google浏览器,显示的是1.43。

    思路:我第一反应应该是js有四舍五入的操作,比如用了toFixed(2)。

    我猜测不同浏览器对toFixed函数解析不一样,可能不是单纯的四舍五入,有的可能有银行家算法(四舍六入,五奇入偶舍)。

    搜索了一下,发现与我预期一致。

    参考网址:

    https://blog.csdn.net/aiyaobucuoo/article/details/54668856

    建议前端减少计算,尽量只做展示。在涉及到除法、保留小数等可能会引起差异的操作时尽量小心仔细。

    展开全文
  • 今天在观察网站关键词排名的时候,意外发现百度搜索不同浏览器中竟然也有不同的表现。    这是我在Firefox浏览器搜索“网站模板”一词的情况,自然排名第二位。    在Chrome浏览器
    百度搜索关键词排名受到不同环境、不同地区的影响,这是有的。特别是与地域相关的关键词,在不同地区搜索排名的不同,也算是对各地区搜索数据的分析做出的一种正确改进。今天在观察网站关键词排名的时候,意外发现百度搜索在不同的浏览器中竟然也有不同的表现。

        \

        这是我在Firefox浏览器下搜索“网站模板”一词的情况,自然排名第二位。

        \

        在Chrome浏览器和IE浏览器下,搜索“网站模板”排名是在第11位。

        在Firefox和Chrome、IE下搜索相同关键词,竟然排名不同,这让我感到特别意外。我开始以为这是和百度账号有关,我反复测试登录百度账号和退出的情况,排名仍然如上图。

        让其他网友测试搜索这一词的情况,搜索结果排名第四,几个浏览器排名结果一致。

        百度搜索结果是否与浏览器环境有关,从猜想的角度来说,是不同能存在的事情。但现在的观察结果却是无法理解,我想,还需要进一步观察、进一步分析。

        原文地址:http://www.5imb.com/show-78-5597-1.html

    展开全文
  • 一、简单介绍一下什么浏览器内核。 浏览器最重要或者说核心的部分是“Rendering Engine”,可大概译“解释引擎”,不过我们一般习惯将之称为“浏览器内核”。负责对网页语法的解释(如HTML、JavaScript)并...

    一、简单介绍一下什么是浏览器内核。


    浏览器最重要或者说核心的部分是“Rendering Engine”,可大概译为“解释引擎”,不过我们一般习惯将之称为“浏览器内核”。负责对网页语法的解释(如HTML、JavaScript)并渲染(显示)网页。

    所以,通常所谓的浏览器内核也就是浏览器所采用的渲染引擎,渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。

    不同的浏览器内核对网页编写语法的解释也有不同,因此同一网页在不同的内核的浏览器里的渲染(显示)效果也可能不同,这也是网页编写者需要在不同内核的浏览器中测试网页显示效果的原因。

     
    浏览器内核很多,如果加上所有的几乎没有什么人在用的非商业的免费内核,那么可能大约有10款以上甚至更多,不过通常我们比较常见的大约只有以下四种,下面先简单介绍一下。
     
    Trident:
    IE浏览器使用的内核,该内核程序在1997年的IE4中首次被采用,是微软在Mosaic代码的基础之上修 改而来的,并沿用到目前的IE9。
    Trident实际上是一款开放的内核,其接口内核设计的相当成熟,因此才有许多 采用IE内核而非IE的浏览器涌现(如 Maxthon、The World 、TT、GreenBrowser、AvantBrowser等)。
    此外, 为了方便也有很多人直接简称其为IE内核(当然也不排除有部分人是因为不知道内核名称而只好如此说)。
    由于IE本身的“垄断性”(虽然名义上IE并非垄断,但实际上,特别是从Windows 95年代一直到XP初期,就市场占有率来说IE的确借助Windows的东风处于“垄断”的地位)而使得Trident内核的长期一家独大,微软很长时间都并没有更新Trident内核,这导致了两个后果——一是Trident内核曾经几乎与W3C标准脱节(2005年),二是Trident内核的大量 Bug等安全性问题没有得到及时解决,然后加上一些致力于开源的开发者和一些学者们公开自己认为IE浏览器不安全的观点,也有很多用户转向了其他浏览器,Firefox和Opera就是这个时候兴起的。非Trident内核浏览器的市场占有率大幅提高也致使许多网页开发人员开始注意网页标准和非IE浏览器的浏览效果问题。
     
    Gecko:
    Netscape6开始采用的内核,后来的Mozilla FireFox (火狐浏览器) 也采用了该内核,Gecko的特点 是代码完全公开,因此,其可开发程度很高,全世界的程序员都可以为其编写代码,增加功能。
    因为这是个开源 内核,因此受到许多人的青睐,Gecko内核的浏览器也很多,这也是Geckos内核虽然年轻但市场占有率能够迅速 提高的重要原因。  
    事实上,Gecko引擎的由来跟IE不无关系,前面说过IE没有使用W3C的标准,这导致了微软内部一些开发人员的不满;他们与当时已经停止更新了的 Netscape的一些员工一起创办了Mozilla,以当时的Mosaic内核为基础 重新编写内核,于是开发出了Geckos。
    不过事实上,Gecko 内核的浏览器仍然还是Firefox (火狐) 用户最多, 所以有时也会被称为Firefox内核。
    此外Gecko也是一个跨平台内核,可以在Windows、 BSD、Linux和Mac OS X 中使用。
     
    Presto:
    目前Opera采用的内核,该内核在2003年的Opera7中首次被使用,该款引擎的特点就是渲染速度的优化达到了极致,也是目前公认网页浏览速度最快的浏览器内核,然而代价是牺牲了网页的兼容性。 
     实际上这是一个动态内核,与前面几个内核的最大的区别就在脚本处理上,Presto有着天生的优势,页面的全部或者部分都能够在回应脚本事件时等情况下被重新解析。
    此外该内核在执行Javascrīpt的时候有着最快的速度,根据在同等条件下的测试,Presto内核执行同等Javascrīpt所需的时间仅有Trident和Gecko内核的约1/3(Trident内核最慢,不过两者相差没有多大)。 那次测试的时候因为Apple机的硬件条件和普通PC机不同所以没有测试WebCore内核。
    只可惜Presto是商业引擎,使用Presto的除开Opera以外,只剩下NDSBrowser、Wii Internet Channle、Nokia 770网络浏览器等,这很大程度上限制了Presto的发展。
     
    Webkit:
    苹果公司自己的内核,也是苹果的Safari浏览器使用的内核。
    Webkit引擎包含WebCore排版引擎及JavaScriptCore解析引擎,均是从KDE的KHTML及KJS引擎衍生而来,它们都是自由软件,在GPL条约下授权,同时支持BSD系统的开发。 所以Webkit也是自由软件,同时开放源代码。在安全方面不受IE、Firefox的制约,所以Safari浏览器在国内还是很安全的。
      限于Mac OS X的使用不广泛和Safari浏览器曾经只是Mac OS X的专属浏览器,这个内核本身应该说市场范围并不大;但似乎根据最新的浏览器调查表明,该浏览器的市场甚至已经超过了Opera的Presto了——当然这一方面得益于苹果转到x86架构之后的人气暴涨,另外也是因为Safari 3终于推出了Windows版的缘故吧。
    Mac下还有OmniWeb、Shiira等人气很高的浏览器。
      google的chrome也使用webkit作为内核。 
        WebKit 内核在手机上的应用也十分广泛,例如 Google 的手机 Gphone、 Apple 的 iPhone, Nokia’s Series 60 browser 等所使用的 Browser 内核引擎,都是基于 WebKit。
     
     
     // 比如检测一下猎豹浏览器(双核) http://ie.icoa.cn/
     
     
     
    PC的浏览器内核主要就是这几个,那手机浏览器是基于什么内核呢?

    目前微软的Trident在移动终端上主要为WP系统内置浏览器,Webkit内核的适用范围则较为广泛,Android原生浏览器、苹果的Safari、谷歌的Chrome(Android4.0使用)都是基于Webkit开源内核开发的。

    从实际情况出发:

    对于Android手机而言,使用率最高的就是Webkit内核,我们看到很多手机浏览器厂商都宣称有着自主内核,比如手机UC就号称采用了U3内核、而华为也经常标榜自己的天天浏览器采用了T9内核,事实上,他们都是基于开源内核Webkit进行二次开发的,并不是完全的自主内核。

    而在iOS以及WP7平台上,由于系统封闭,不允许除系统自带浏览器内核以外的浏览器内核进入,因此各家浏览器的开发均为在Safari或者IE内核的基础上进行二次开发,优化功能和自制UI。

    比如海豚、遨游等浏览器就是直接采用系统自带浏览器的内核,这点从这几款浏览器的HTML5评分与系统自带浏览器评分结果完全一致就可以看出。

    内核并无手机与PC的区分,手机浏览器的内核与PC浏览器类似,例如:

    • IE手机版和PC版都是Trident内核的;
    • Opera手机版和PC版都是Presto内核的(自从2013年2月13日Opera宣布放弃Presto内核转向Webkit内核后,已出现部分Webkit内核的Opera手机浏览器测试版);
    • Firefox手机版和PC版都是Gecko内核的;
    • Chrome、Safari手机版和PC版都是Webkit内核的。

    至于国内的UC和QQ等手机浏览器也都是根据Webkit修改过来的内核。

     

     

    --------------- 另一个关于浏览器内核的说明 -----------------
    可以直接去 维基百科 看看 
     

    一、排版引擎

        首先厘清一下浏览器内核是什么东西。

        英文叫做:Rendering Engine,中文翻译很多,排版引擎、解释引擎、渲染引擎,现在流行称为浏览器内核,至于为什么流行这么称呼,请自行领悟。

        Rendering Engine,顾名思义,就是用来渲染网页内容的,将网页的内容和排版代码转换为可视的页面。因为是排版,所以肯定会排版错位等问题。为什么会排版错位呢?有的是由于网站本身编写不规范,有的是由于浏览器本身的渲染不标准。

        现在有几个主流的排版引擎,因为这些排版引擎都有其代表的浏览器,所以常常会把排版引擎的名称和浏览器的名称混用,比如常的说IE内核、Chrome内核。其实这样子是不太合理的,因为一个完整的浏览器不会只有一的排版引擎,还有自己的界面框架和其它的功能支撑,而排版引擎本身也不可能实现浏览器的所有功能。下面罗列一下几款主流的排版引擎和浏览器。

    1、Trident(Windows)

        IE浏览器所使用的内核,也是很多浏览器所使用的内核,通常被称为IE内核。基于Trident内核的浏览器非常多,这是因为Trident内核提供了丰富的调用接口。老的Trident内核(比如常说的IE6内核)一直是不遵循W3C标准的,但是由于它的市场份额最大,所以后果就是大量的网站只支持老的Trident内核,依据W3C标准写的网页在老的Trident内核下面又出现偏差。目前可供调用的最新版的Trident内核是IE9所用的内核,相较之前的版本对W3C标准的支持增强了很多。

    Trident内核的浏览器:

    IE6、IE7、IE8(Trident 4.0)、IE9(Trident 5.0)、IE10(Trident 6.0);

    世界之窗1、世界之窗2、世界之窗3;

    360安全浏览器1、360安全浏览器2、360安全浏览器3、360安全浏览器4、360安全浏览器5;

    傲游1、傲游2;搜狗浏览器1;腾讯TT;阿云浏览器(早期版本)、百度浏览器(早期版本)、瑞星安全浏览器、Slim Browser;

    GreenBrowser、爱帆浏览器(12 之前版本)、115浏览器、155浏览器;

    闪游浏览器、N氧化碳浏览器、糖果浏览器、彩虹浏览器、瑞影浏览器、勇者无疆浏览器、114浏览器、蚂蚁浏览器、飞腾浏览器、速达浏览器、佐罗浏览器;

    2、Gecko(跨平台)

        Netscape6启用的内核,现在主要由Mozilla基金会进行维护,是开源的浏览器内核,目前最主流的Gecko内核浏览器是Mozilla Firefox,所以也常常称之为火狐内核。因为Firefox的出现,IE的霸主地位逐步被削弱,Chrome的出现则是加速了这个进程。非Trident内核的兴起正在改变着整个互联网,最直接的就是推动了编码的标准化,也使得微软在竞争压力下不得不改进IE。不过比较可惜的是,虽然是开源的,也开发了这么多年,基于Gecko的浏览器并不多见,除了一些简单的改动(坑爹的X浏览器)或者是重新编译(绫川ayakawa、tete009),深度定制或者增强型外壳的还比较少见。另外就是有一些其它软件借用了Gecko内核,比如音乐管理软件SongBird。

    常见的Gecko内核的浏览器

    Mozilla Firefox、Mozilla SeaMonkey

    Epiphany(早期版本)、Flock(早期版本)、K-Meleon

    3、KHTML(Linux)

        KDE开发的内核,速度快捷,容错度低。这个内核可能不见得很多人知道,但是后面再看下去你就明白了。

        常见的KHTML内核的浏览器:Konqueror

    4、WebKit(跨平台)

        由KHTML发展而来,也是苹果给开源世界的一大贡献。是目前最火热的浏览器内核,火热倒不是说市场份额,而是应用的面积和势头。因为是脱胎于KHTML,所以也是具有高速的特点,同样遵循W3C标准。

        常见的WebKit内核的浏览器:Apple Safari、Symbian系统浏览器

    5、Chromium(跨平台)

        维基百科里面并没有将Chromium从WebKit分出来,这个区分完全是基于我个人的恶趣味。记得以前看过一个大牛的博文说过,Chromium把WebKit的代码梳理得可读性提高很多,所以以前可能需要一天进行编译的代码,现在只要两个小时就能搞定。这个我自己也没有考究过,但是估计可信。这个也能解释为什么Gecko和WebKit出来了这么久,第三方编译、定制的版本并不多,但是由Chromium衍生出来的浏览器早就满坑满谷了。

        常见的Chromium内核的浏览器:Chromium、Google Chrome、SRWare Iron、Comodo Dragon

    6、Presto(跨平台)

        Opera的内核,准确地说,是Opera 7.0及以后版本的内核,Opera 3.5-6.1版本使用的内核叫做Elektra。不用说,Presto对W3C标准的支持也是很良好的。虽然我很喜欢Opera,但是我对Presto的渲染速度一直有保留态度。之前在OperaChina论坛看见有人说过,Presto优先解析文字,保证可阅读性,媒体资源的渲染放后。

        常见的Presto内核的浏览器:Opera

    7、其它

    http://zh.wikipedia.org/wiki/排版引

     

    二、JavaScript引擎

     

        说完了排版引擎,接下来说说JavaScript引擎。顾名思义,JavaScript引擎就是用来渲染JavaScript的。

    为什么要单独拿出来说呢?因为它涉及到跑分。经常看见很多文章在报道说哪个浏览器更快,其实大部分说的就是JavaScript的渲染速度,而不是页面的载入速度。在网速许可的情况下,其实各个浏览器的页面载入速度差别不大(Opera逊色一些)。那是不是说对比JavaScript的渲染速度其实没有意义?也不是这么说,因为现在JavaScript在页面中的比重会越来越大,越来越多的动态页面开始大量借助JavaScript,比如现在主流的SNS、邮箱、网页游戏,所以JavaScript的渲染速度也是一个很重要的指标。

    JavaScript的渲染速度越快,动态页面的展示也越快。Opera在JavaScript引擎的跑分上面一直都是很牛逼的,一般来说最新测试版之间PK,Opera基本都会夺冠。

    1、Chakra

    查克拉,IE9启用的新的JavaScript引擎。

    2、SpiderMonkey/TraceMonkey/JaegerMonkey

    SpiderMonkey应用在Mozilla Firefox 1.0-3.0,TraceMonkey应用在Mozilla Firefox 3.5-3.6版本,JaegerMonkey应用在Mozilla Firefox 4.0及后续的版本。

    3、V8

    应用于Chrome、傲游3。

    4、Nitro

    应用于Safari 4及后续的版本。

    5、Linear A/Linear B/Futhark/Carakan

    Linear A应用于Opera 4.0-6.1版本,Linear B应用于Opera 7.0~9.2版本,Futhark应用于Opera 9.5-10.2版本,Carakan应用于Opera 10.5及后续的版本。

    6、KJS

    KHTML对应的JavaScript引擎。

     

    三、几个测试

     

    1、V8引擎

    http://v8.googlecode.com/svn/data/benchmarks/v6/run.html

        现在很多“双核”浏览器都用它来跑分测试JavaScript引擎,分数越高越好。

    2、Acid3

    http://acid3.acidtests.org/

        标准支持测试,分数越高越好,满分是100分。

    3、HTML5

    http://www.html5test.com/

        测试浏览器对HTML5标准的支持,分数越高越好。

     

    四、几个奇葩

     

    1、IETab

        在没有第三方编译版本的时候,IETab一直是Mozilla Firefox、Chrome等非Trident内核的浏览器的安装量最大的扩展之一,方便用户在不开启IE的情况下调用Trident内核访问一些兼容性比较差的网站。

    2、Trident/Gecko双核浏览器

        虽然IETab能实现部分需求,但是深度订制的毕竟还是不一样,所以Trident/Gecko双核浏览器就诞生了,Sleipnir、Avant 12(Orca)是这类里面比较常见的。Avant 12因为有Orca的前期积累,所以轻车熟路,后面还打算加入Chromium,变成三核浏览器,但是偏偏现在Mozilla Firefox和Chrome都在疯狂刷版本号,肯定有一部分精力要花在跟进版本上。

    3、Trident/WebKit双核浏览器

        现在国内最主流的“双核”浏览器基本都是这个架构,360极速浏览器、世界之窗浏览器极速版、傲游3搜狗浏览器3、QQ浏览器、枫树浏览器、快快浏览器、百度浏览器、阿云浏览器(后期版本)、太阳花浏览器,其中最奇葩的是傲游3。其它双核浏览器都是基于Chromium的,而傲游是基于WebKit的,但是偏偏又用的是V8引擎。

    4、Trident/Gecko/WebKit三核浏览器

        目前能见的应该就是日本的Lunascape,Avant增加了WebKit内核之后也会归类到这里。说实话,Lunascape真的很难用,真的很奇葩。各个内核相对独立,外壳本身不够强化,稳定性不高,所以还不如用回单核浏览器。

     

     

    五、几个小点

     

    1、Chrome/Chromium

        很多人都会说自己用的双核浏览器是Chrome/IE双核的,或者说是基于Chrome的。其实这种说法并不正确,因为Chrome本身并不开源,其它厂商是不能去定制Chrome的。能被修改、定制的是Chromium,Chrome的开源开发版本,代码和Build都提供下载。Chromium/Chrome两个单词都是铬,分别是拉丁文和英文,除了名字之外,很有很多不同,你可以自己对比一下。

        Chromium一天最多可以更新十几二十个版本,实验性的新特性都会现在这里放出,但是Chromium本身其实并不稳定。

        Chrome总共有四个更新分支:Canary、Dev、Beta、Stable,稳定性依次增强。

    2、MyIE、MyIE2、傲游、GreenBrowser

        自行搜索,一段历史。

    3、页面兼容性判断

        在确保IE浏览器没有损坏的基础上,搭配一款非Trident内核的浏览器进行判断,如果可以的话,最好所有内核都配齐了。

        控制变量就能找到问题所在,是浏览器本身的问题,还是页面编码有问题。对于用户来说就能更好地去选择自己该用什么浏览器访问什么页面,对于开发者来说应该要写出无差别代码。

    4、一直被模仿,一直被超越的Opera

    Opera其实很好看也很好用,而且极度创新,但是市场占有率一直很低。很多很好用的新特性总是被抄袭,所以大家笑称Opera“一直被模仿,一直被超越”。坊间传闻多标签页浏览器就是Opera发明的,但是貌似有人考究了这个传闻其实不属实。不过快速拨号、Turbo浏览等功能就是扎扎实实Opera首创的。你可以不用Opera,但是你会损失很多乐趣。

    5、这年头流行刷版本号

    现在版本号最高的浏览器是Chrome,稳定版的版本号是14,也是现在主流浏览器里面诞生时间最短的,真是一个刷版本号高手。早期的Chrome版本更迭还会增加一些比较重要的新特性,比如扩展支持,现在的版本更迭基本上并没有伴随什么大的更新。现在很多伪高端用户就会整天追着第三方编译版本赶紧跟进版本号,但是其实真正的意义并不大。

    多亏了Chrome的“提携”,今年Firefox也在猛刷版本号,年初还是3.x,现在正式版已经是7.0.1,每夜版已经到了10.0。Opera积累了多年才到11.50,测试版是12.0。IE的正式版是9,平台预览版是10。

    6、查看源代码、开发者工具

    一般来说,查看源代码和使用开发者工具是比较实用的,可能用的机会并不多,但是在判断一些问题的时候其实是很有用的。通过查看源代码或者使用开发者工具,可以大致了解这些网站里面的一些元素或者加载的脚本或者是规则,对于判断兼容性问题有一定的帮助,也可以用来准确捕捉页面元素。

    7、几个主要的浏览器官网以及版本下载

    (1)Internet Explorer

    官网:

    http://windows.microsoft.com/zh-CN/internet-explorer/products/ie/home

    IE7下载:

    http://www.microsoft.com/downloads/zh-cn/details.aspx?displaylang=zh-cn&FamilyID=9ae91ebe-3385-447c-8a30-081805b2f90b

    IE8下载:

    http://windows.microsoft.com/zh-CN/internet-explorer/downloads/ie-8

    IE9下载:

    http://windows.microsoft.com/zh-CN/internet-explorer/downloads/ie-9/worldwide-languages

    (2)Mozilla Firefox

    官网:

    http://firefox.com.cn/

    7.x Release:

    http://releases.mozilla.org/pub/mozilla.org/firefox/releases/latest/win32/zh-CN/

    8.x Candidates:

    http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/8.0b1-candidates/build1/win32/zh-CN/

    9.x Aurora:

    http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-mozilla-aurora/

    10.x Nightly:

    http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-trunk/

    (3)Apple Safari

    官网:

    http://www.apple.com.cn/safari/

    下载:

    http://www.apple.com.cn/safari/download/

    (4)Chromium

    官网:

    http://www.chromium.org/

    下载:

    http://build.chromium.org/f/chromium/snapshots/Win_Webkit_Latest/

    (5)Google Chrome

    官网:

    http://www.google.com/chrome?hl=zh-cn

    Stable在线安装包:

    http://www.google.com/chrome/eula.html?hl=zh-cn

    Beta在线安装包:

    http://www.google.com/chrome/eula.html?hl=zh-CN&extra=betachannel

    Dev在线安装包:

    http://www.google.com/chrome/eula.html?hl=zh-CN&extra=devchannel

    Canary在线安装包:

    http://www.google.com/chrome/eula.html?hl=zh-CN&extra=canarychannel

    Stable离线安装包:

    http://www.google.com/chrome/eula.html?hl=zh-CN&standalone=1

    Beta离线安装包:

    http://www.google.com/chrome/eula.html?hl=zh-CN&standalone=1&extra=betachannel

    Dev离线安装包:

    http://www.google.com/chrome/eula.html?hl=zh-CN&standalone=1&extra=devchannel

    Canary离线安装包:

    http://www.google.com/chrome/eula.html?hl=zh-CN&standalone=1&extra=canarychannel

    (6)Opera

    官网:

    http://www.opera.com/

    正式版:

    http://www.opera.com/download/

    测试版:

    http://snapshot.opera.com/windows/latest

     
    ----------------- 隔 ----------------
     
     
     
     
    二、浏览器渲染原理
     

    Web页面运行在各种各样的浏览器当中,浏览器载入、渲染页面的速度直接影响着用户体验简单地说,页面渲染就是浏览器将html代码根据CSS定义的规则显示在浏览器窗口中的这个过程。

    先来大致了解一下浏览器都是怎么干活的:   

    1. 用户输入网址(假设是个html页面,并且是第一次访问),浏览器向服务器发出请求,服务器返回html文件;   

    2. 浏览器开始载入html代码,发现<head>标签内有一个<link>标签引用外部CSS文件;   

    3. 浏览器又发出CSS文件的请求,服务器返回这个CSS文件;   

    4. 浏览器继续载入html中<body>部分的代码,并且CSS文件已经拿到手了,可以开始渲染页面了;   

    5. 浏览器在代码中发现一个<img>标签引用了一张图片,向服务器发出请求。此时浏览器不会等到图片下载完,而是继续渲染后面的代码;   

    6. 服务器返回图片文件,由于图片占用了一定面积,影响了后面段落的排布,因此浏览器需要回过头来重新渲染这部分代码;   

    7. 浏览器发现了一个包含一行Javascript代码的<script>标签,赶快运行它;   

    8. Javascript脚本执行了这条语句,它命令浏览器隐藏掉代码中的某个(style.display=”none”)。杯具啊,突然就少了这么一个元素,浏览器不得不重新渲染这部分代码;   

    9. 终于等到了</html>的到来,浏览器泪流满面……   
    10. 等等,还没完,用户点了一下界面中的“换肤”按钮,Javascript让浏览器换了一下<link>标签的CSS路径;   
    11. 浏览器召集了在座的各位
    <span><ul><li>们,“大伙儿收拾收拾行李,咱得重新来过……”,浏览器向服务器请求了新的CSS文件,重新渲染页面。

     

     

      浏览器每天就这么来来回回跑着,要知道不同的人写出来的html和css代码质量参差不齐,说不定哪天跑着跑着就挂掉了。

    好在这个世界还有这么一群人——页面重构工程师,平时挺不起眼,也就帮视觉设计师们切切图啊改改字,其实背地里还是干了不少实事的。

    说到页面为什么会慢?那是因为浏览器要花时间、花精力去渲染,尤其是当它发现某个部分发生了点变化影响了布局,需要倒回去重新渲染,内行称这个回退的过程叫reflow。

    不同内核浏览器的差异以及浏览器渲染简介

     

       reflow几乎是无法避免的。现在界面上流行的一些效果,比如树状目录的折叠、展开(实质上是元素的显示与隐藏)等,都将引起浏览器的 reflow。

    鼠标滑过、点击……只要这些行为引起了页面上某些元素的占位面积、定位方式、边距等属性的变化,都会引起它内部、周围甚至整个页面的重新渲染。

    通常我们都无法预估浏览器到底会reflow哪一部分的代码,它们都彼此相互影响着。

    不同内核浏览器的差异以及浏览器渲染简介

       reflow问题是可以优化的,我们可以尽量减少不必要的reflow。

    比如开头的例子中的<img>图片载入问题,这其实就是一个可以避免的reflow——给图片设置宽度和高度就可以了。

    这样浏览器就知道了图片的占位面积,在载入图片前就预留好了位置。

    另外,有个和reflow看上去差不多的术语:repaint,中文叫重绘

    如果只是改变某个元素的背景色、文字颜色、边框颜色等等不影响它周围或内部布局的属性,将只会引起浏览器repaint。

    repaint的速度明显快于 reflow(在IE下需要换一下说法,reflow要比repaint 更缓慢)。

     

     

    三、从浏览器的渲染原理讲CSS性能

     

    平时我们几乎每天都在和浏览器打交道,写出来的页面很有可能在不同的浏览器下显示的不一样。苦逼的前端攻城师们为了兼容各个浏览器而不断地去测试和调试,还在脑子中记下各种遇到的BUG及解决方案,而我们好像并没有去主动地关注和了解下浏览器的工作原理。

    如果我们对此做一点了解,我想在项目过程中就可以根据它有效的避免一些问题以及对页面性能做出相应的改进。

    今天我们主要根据浏览器的渲染原理对CSS的书写性能做一点改进(当然还有JS本篇文章暂不考虑,后面的文章会做介绍),下面让我们一起来揭开浏览器的渲染原理这一神秘的面纱吧:

    最终决定浏览器表现出来的页面效果的差异是:渲染引擎 Rendering Engine(也叫做排版引擎),也就是我们通常所说的“浏览器内核”,负责解析网页语法(如HTML、JavaScript)并渲染、展示网页。相同的代码在不同的浏览器呈现出来的效果不一样,那么就很有可能是不同的浏览器内核导致的。

    我们来看一下加载页面时浏览器的具体工作流程(图一):

    id="iframe_0.6653571213866947" src="data:text/html;charset=utf8,%3Cimg%20id=%22img%22%20src=%22http://www.smallni.com/wp-content/uploads/2011/09/0_1315384739kRCC.png?_=4481092%22%20style=%22border:none;max-width:1024px%22%3E%3Cscript%3Ewindow.onload%20=%20function%20()%20%7Bvar%20img%20=%20document.getElementById('img');%20window.parent.postMessage(%7BiframeId:'iframe_0.6653571213866947',width:img.width,height:img.height%7D,%20'http://www.cnblogs.com');%7D%3C/script%3E" style="border: none; width: 600px; height: 66px;" frameborder="0" scrolling="no">

    (图一)

    1、解析HTML以重建DOM树(Parsing HTML to construct the DOM tree ):渲染引擎开始解析HTML文档,转换树中的标签到DOM节点,它被称为“内容树”。

    2、构建渲染树(Render tree construction):解析CSS(包括外部CSS文件和样式元素),根据CSS选择器计算出节点的样式,创建另一个树 —- 渲染树。

    3、布局渲染树(Layout of the render tree): 从根节点递归调用,计算每一个元素的大小、位置等,给每个节点所应该出现在屏幕上的精确坐标。

    4、绘制渲染树(Painting the render tree) : 遍历渲染树,每个节点将使用UI后端层来绘制。

    主要的流程就是:构建一个dom树,页面要显示的各元素都会创建到这个dom树当中,每当一个新元素加入到这个dom树当中,浏览器便会通过css引擎查遍css样式表,找到符合该元素的样式规则应用到这个元素上。

    注意了:css引擎查找样式表,对每条规则都按从右到左的顺序去匹配。

    看如下规则:

    1
    #nav  li {}

    看起来很快,实际上很慢,尽管这让人有点费解#_#。

    我们中的大多数人,尤其是那些从左到右阅读的人,可能猜想浏览器也是执行从左到右匹配规则的,因此会推测这条规则的开销并不高。

    在脑海中,我们想象浏览器会像这样工作:找到唯一的ID为nav的元素,然后把这个样式应用到直系子元素的li元素上。

    我们知道有一个ID为nav的元素,并且它只有几个Li子元素,所以这个CSS选择符应该相当高效。

    事实上,CSS选择符是从右到左进行匹配的。了解这方面的知识后,我们知道这个之前看似高效地规则实际开销相当高,浏览器必须遍历页面上每个li元素并确定其父元素的id是否为nav。

    1
    *{}

    额,这种方法我刚写CSS的也写过,殊不知这种效率是差到极点的做法,因为*通配符将匹配所有元素,所以浏览器必须去遍历每一个元素,这样的计算次数可能是上万次!

    1
    ul#nav{} ul.nav{}

    在页面中一个指定的ID只能对应一个元素,所以没有必要添加额外的限定符,而且这会使它更低效。同时也不要用具体的标签限定类选择符,而是要根据实际的情况对类名进行扩展。例如把ul.nav改成.main_nav更好。

    1
    ul li li li .nav_item{}

    对于这样的选择器,之前也写过,最后自己也数不过来有多少后代选择器了,何不用一个类来关联最后的标签元素,如.extra_navitem,这样只需要匹配class为extra_navitem的元素,效率明显提升了

    对此,在CSS书写过程中,总结出如下性能提升的方案:

    1. 避免使用通配规则      如    *{} 计算次数惊人!只对需要用到的元素进行选择
    2. 尽量少的去对标签进行选择,而是用class     如:#nav li{},可以为li加上nav_item的类名,如下选择.nav_item{}
    3. 不要去用标签限定ID或者类选择符   如:ul#nav,应该简化为#nav
    4. 尽量少的去使用后代选择器,降低选择器的权重值  后代选择器的开销是最高的,尽量将选择器的深度降到最低,最高不要超过三层,更多的使用类来关联每一个标签元素
    5. 考虑继承 了解哪些属性是可以通过继承而来的,然后避免对这些属性重复指定规则

    选用高效的选择符,可以减少页面的渲染时间,从而有效的提升用户体验(页面越快,用户当然越喜欢^_^),你可以看一下CSS selectors Test,这个实验的重点是评估复杂选择符和简单选择符的开销。

    也许当你想让渲染速度最高效时,你可能会给每个独立的标签配置一个ID,然后用这些ID写样式。那的确会超级快,也超级荒唐!这样的结果是语义极差,后期的维护难到了极点。

    但说到底,CSS性能这东西对于小的项目来讲可能真的是微乎其微的东西,提升可能也不是很明显,但对于大型的项目肯定是有帮助的。而且一个好的CSS书写习惯和方式能够帮助我们更加严谨的要求自己。

     

    --------------------------- 原文 -----------------------------

    展开全文
  • 解决不同浏览器对css支持问题详解

    千次阅读 2015-05-22 18:40:28
    多使用JQuery,它有很好的兼容性。...在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果!

    解决不同浏览器对css支持问题

    多使用JQuery,它有很好的兼容性。
    在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果!
    所有浏览器 通用 height: 100px; IE6 专用 _height: 100px; IE6 专用 *height: 100px; IE7 专用 *+height: 100px; IE7、FF 共用 height: 100px !important;
    一、CSS HACK 
    1, !important
    随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.)
    以下为引用的内容:   
    2, IE6/IE7对FireFox
    以下为引用的内容:*+html 与 *html 是IE特有的标签, firefox 暂不支持.而*+html 又为 IE7特有标签.   
    注意:*+html 对IE7的HACK 必须保证HTML顶部有如下声明:
    二、万能 float 闭合
    关于 clear float 的原理可参见 [How To Clear Floats Without Structural Markup]将以下代码加入Global CSS 中,给需要闭合的div加上 class=”clearfix” 即可,屡试不爽.
    以下为引用的内容:    
    三、其他兼容技巧
    1, FF下给 div 设置 padding 后会导致 width 和 height 增加, 但IE不会.(可用!important解决) 如width:115px !important;width:120px;padding:5px;

     必须注意的是, !important; 一定要在前面。

     2, 居中问题.1).垂直居中.将 line-height 设置为 当前 div 相同的高度, 再通过 vertical-align: middle.( 注意内容不要换行.)2).水平居中. margin: 0 auto;(当然不是万能)3, 若需给 a 标签内内容加上 样式, 需要设置 display: block;(常见于导航标签)4, FF 和 IE 对 BOX 理解的差异导致相差 2px 的还有设为 float的div在ie下 margin加倍等问题.5, ul 标签在 FF 下面默认有 list-style 和 padding . 最好事先声明, 以避免不必要的麻烦. (常见于导航标签和内容列表)6, 作为外部 wrapper 的 div 不要定死高度, 最好还加上 overflow: hidden.以达到高度自适应.7, 关于手形光标. cursor: pointer. 而hand 只适用于 IE.

    兼容代码:兼容最推荐的模式。 .submitbutton { float:left; width: 40px; height: 57px; margin-top: 24px; margin-right: 12px; } *html .submitbutton { margin-top: 21px; } *+html .submitbutton { margin-top: 21px; } 什么是浏览器兼容:当我们使用不同的浏览器(Firefox IE7 IE6)访问同一个网站,或者页面的时候,会出现一些不兼容的问题,有的显示出来正常,有的显示出来不正常,我们在编写CSS的时候会很恼火,刚修复了这个浏览器的问题,结果另外一个浏览器却出了新问题。而兼容就是一种办法,能让你在一个CSS里面独立的写支持不同浏览器的样式。这下就和谐了。呵呵! 最近微软发布的IE7浏览器的兼容性确实给一些网页制作人员添加了一个沉重的负担,虽然IE7已经走向标准化,但还是有许多和FF不同的地方,所以需要用到IE7的兼容。有一点逻辑思想的人都会知道可以用IE和FF的兼容结合起来使用,下面介绍三个兼容,例如:(适合新手,呵呵,高手就在这里路过吧。) 程序代码 第一个兼容,IE FF 所有浏览器 公用(其实也不算是兼容) height:100px; 第二个兼容 IE6专用 _height:100px; 第三个兼容 IE6 IE7公用 *height:100px; 介绍完了这三个兼容了,下面我们再来看看如何在一个样式里分别给一个属性定义IE6 IE7 FF专用的兼容,看下面的代码,顺序不能错哦: 程序代码 height:100px; *height:120px; _height:150px; 下面我简单解释一下各浏览器怎样理解这三个属性: 在FF下,第2、3个属性FF不认识,所以它读的是 height:100px; 在IE7下,第三个属性IE7不认识,所以它读第1、2个属性,又因为第二个属性覆盖了第一个属性,所以IE7最终读出的是第2个属性 *height:120px; 在IE6下,三个属性IE6都认识,所以三个属性都可以读取,又因为第三个属性覆盖掉前2个属性,所以IE6最终读取的是第三个属性。 
    1 针对firefox ie6 ie7的css样式现在大部分都是用!important来hack,对于ie6和firefox测试可以正常显示,但是ie7对!important可以正确解释,会导致页面没按要求显示!找到一个针对IE7不错的hack方式就是使用“*+html”,现在用IE7浏览一下,应该没有问题了。现在写一个CSS可以这样:
    以下为引用的内容:#1 { color: #333; }* html #1 { color: #666; }*+html #1 { color: #999; }    
    那么在firefox下字体颜色显示为#333,IE6下字体颜色显示为#666,IE7下字体颜色显示为#999。
    2 css布局中的居中问题主要的样式定义如下:
    body {TEXT-ALIGN: center;}#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }说明:首先在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中;对于IE这样设定就已经可以了。但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上“MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ”需要说明的是,如果你想用这个方法使整个页面要居中,建议不要套在一个DIV里,你可以依次拆出多个div,只要在每个拆出的div里定义MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 就可以了。
    3 盒模型不同解释
    #box{ width:600px; //for ie6.0- w\idth:500px; //for ff+ie6.0}#box{ width:600px!important //for ff width:600px; //for ff+ie6.0 width :500px; //for ie6.0-}
    4 浮动ie产生的双倍距离
    #box{ float:left; width:100px; margin:0 0 0 100px; //这种情况之下IE会产生200px的距离 display:inline; //使浮动忽略}这里细说一下block,inline两个元素,Block元素的特点是:总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是:和其他元素在同一行上,…不可控制(内嵌元素);
    #box{ display:block; //可以为内嵌元素模拟为块元素 display:inline; //实现同一行排列的的效果 diplay:table;
    IE不认得min-这个定义,但实际上它把正常的width和height当作有min的情况来使。这样问题就大了,如果只用宽度和高度,正常的浏览器里这两个值就不会变,如果只用min-width和min-height的话,IE下面根本等于没有设置宽度和高度。比如要设置背景图片,这个宽度是比较重要的。要解决这个问题,可以这样:#box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}
    6 页面的最小宽度
    min-width是个非常方便的CSS命令,它可以指定元素最小也不能小于某个宽度,这样就能保证排版一直正确。但IE不认得这个,而它实际上把width当做最小宽度来使。为了让这一命令在IE上也能用,可以把一个
    放到标签下,然后为div指定一个类:然后CSS这样设计:#container{ min-width: 600px; width:expression_r(document.body.clientWidth < 600? “600px”: “auto” );}第一个min-width是正常的;但第2行的width使用了Javascript,这只有IE才认得,这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。
    7 清除浮动
    .hackbox{ display:table; //将对象作为块元素级的表格显示}或者.hackbox{ clear:both;}或者加入:after(伪对象),设置在对象后发生的内容,通常和content配合使用,IE不支持此伪对象,非Ie 浏览器支持,所 以并不影响到IE/WIN浏览器。这种的最麻烦的……#box:after{ content: “.”; display: block; height: 0; clear: both; visibility: hidden;}
    8 DIV浮动IE文本产生3象素的bug
    左边对象浮动,右边采用外补丁的左边距来定位,右边对象内的文本会离左边有3px的间距.
    #box{ float:left; width:800px;}#left{ float:left; width:50%;}#right{ width:50%;}*html #left{ margin-right:-3px; //这句是关键}HTML代码
    9 属性选择器(这个不能算是兼容,是隐藏css的一个bug)
    p[id]{}div[id]{}这个对于IE6.0和IE6.0以下的版本都隐藏,FF和OPera作用属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性选择器的范围比较大,如p[id]中,所有p标签中有id的都是同样式的.
    10 IE捉迷藏的问题
    当div应用复杂的时候每个栏中又有一些链接,DIV等这个时候容易发生捉迷藏的问题。有些内容显示不出来,当鼠标选择这个区域是发现内容确实在页面。解决办法:对#layout使用line-height属性 或者给#layout使用固定高和宽。页面结构尽量简单。
    11 高度不适应 高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节,特别是当内层对象使用 margin 或paddign 时。例: 
    p对象中的内容
    CSS: #box {background-color:#eee; } #box p {margin-top: 20px;margin-bottom: 20px; text-align:center; } 解决方法:在P对象上下各加2个空的div对象CSS代码:.1{height:0px;overflow:hidden;}或者为DIV加上border属性。 屏蔽IE浏览器(也就是IE下不显示) *:lang(zh) select {font:12px !important;}  select:empty {font:12px !important;}  这里select是选择符,根据情况更换。第二句是MAC上safari浏览器独有的。 仅IE7识别 *+html {…} 当面临需要只针对IE7做样式的时候就可以采用这个兼容。 IE6及IE6以下识别 * html {…} 这个地方要特别注意很多地主都写了是IE6的兼容其实IE5.x同样可以识别这个兼容。其它浏览器不识别。 html >body select {……} 这句与上一句的作用相同。 仅IE6不识别 select { display :none;} 这里主要是通过CSS注释分开一个属性与值,流释在冒号前。 仅IE6与IE5不识别 select { display :none;} 这里与上面一句不同的是在选择符与花括号之间多了一个CSS注释。 仅IE5不识别 select { display:none;} 这一句是在上一句中去掉了属性区的注释。只有IE5不识别 盒模型解决方法 selct {width:IE5.x宽度; voice-family :""}""; voice-family:inherit; width:正确宽度;} 盒模型的清除方法不是通过!important来处理的。这点要明确。 清除浮动 select:after {content:"."; display:block; height:0; clear:both; visibility:hidden;} 在Firefox中,当子级都为浮动时,那么父级的高度就无法完全的包住整个子级,那么这时用这个清除浮动的兼容来对父级做一次定义,那么就可以解决这个问题 。 截字省略号 select { -o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrapoverflow:hidden; } 这个是在越出长度后会自行的截掉多出部分的文字,并以省略号结尾,很好的一个技术。只是目前Firefox并不支持。 只有Opera识别 @media all and (min-width: 0px){ select {……} } 针对Opera浏览器做单独的设定。 以上都是写CSS中的一些兼容,建议遵循正确的标签嵌套(div ul li 嵌套结构关系),这样可以减少你使用兼容的频率,不要进入理解误区,并不是一个页面就需要很多的兼容来保持多浏览器兼容),很多情况下也许一个兼容都不用也可以让浏览器工作得非常好,这些都是用来解决局部的兼容性问题,如果希望把兼容性的内容也分离出来,不妨试一下下面的几种过滤器。这些过滤器有的是写在CSS中通过过滤器导入特别的样式,也有的是写在HTML中的通过条件来链接或是导入需要的补丁样式。 IE5.x的过滤器,只有IE5.x可见 @media tty { i{content:"";}} @import ’ie5win.css’;  IE5/MAC的过滤器,一般用不着 下面是IE的条件注释,个人觉得用条件注释调用相应 兼容是比较完美的多浏览器兼容的解决办法。把需要兼容的地方单独放到一个文件里面,当浏览器版本符合的时候就可以调用那个被兼容的样式,这样不仅使用起来非常方便,而且对于制作这个CSS本身来讲,可以更严格的观察到是否有必要使用兼容,很多情况下,当我本人写CSS如果把全部代码包括兼容都写到一个CSS文件的时候的时候会很随意,想怎么兼容就怎么兼容,而你独立出来写的时候,你就会不自觉的考虑是否有必要兼容,是先兼容 CSS?还是先把主CSS里面的东西调整到尽可能的不需要兼容?当你仅用很少的兼容就让很多浏览器很乖很听话的时候,你是不是很有成就感呢?你知道怎么选择了吧~~呵呵 IE的if条件兼容 自己可以灵活使用参看这篇IE条件注释 Only IE 所有的IE可识别 只有IE5.0可以识别 Only IE 5.0+ IE5.0包换IE5.5都可以识别 仅IE6可识别 Only IE 7/- IE6以及IE6以下的IE5.x都可识别 Only IE 7/- 仅IE7可识别 Css 当中有许多的东西不按照某些规律来的话,会让你很心烦,虽然你可以通过很多的兼容,很多的!important 来控制它,但是你会发现长此以往你会很不甘心,看看许多优秀的网站,他们的CSS让IE6,Ie7,Firefox,甚至Safari,Opera运行起来完美无缺是不是很羡慕?而他们看似复杂的模版下面使用的兼容 少得可怜。其实你要知道IE 和 Firefox 并不不是那么的不和谐,我们找到一定的方法,是完全可以让他们和谐共处的。不要你认为发现了兼容的办法,你就掌握了一切,我们并不是兼容的奴隶。 div ul li 的嵌套顺序 今天只讲一个规则。就是
    的三角关系。我的经验就是
    在最外面,里面是
    ,而不用
    的时候,你会发现你的间隙十分难控制,一般情况下,IE6和IE7会凭空多一些间距。但很多情况你来到下一行,间隙就没了,但是前面的内容又空了很大一块,出现这种情况虽然你可以改变IE的Margin,然后调整Firefox下面的Padding,以便使得两者显示起来得效果很相似,但是你得CSS将变得臭长无比,你不得不多考虑更多可能出现这种问题补救措施,虽然你知道千篇一律来兼容它们,但是你会烦得要命。 
    具体嵌套写法 
    遵循上面得嵌套方式,然后在CSS 里面告诉 ul {Margin:0px;Padding:0px;list-style:none;},其中list-style:none是不让
    标记的最前方显示圆点或者数字等目录类型的标记,因为IE和Firefox显示出来默认效果有些不一样。因此这样不需要做任何手脚,你的IE6、和IE7、Firefox显示出来的东西(外距,间距,高度,宽度)就几乎没什么区别了,也许细心的你会在某一个时刻发现:两个象素的差别,但那已经很完美了,不需要你通过调整大片的CSS来控制它们的显示了,你愿意,你可以仅仅兼容一两个地方,而且通常这种兼容可以适应各种地方,不需要你重复在不同的地方调试不同的兼容方式–减轻你的烦。你可以ul.class1, ul.class2, ul.class3 {xxx:xxxx}的方式方便的整理出你要兼容的地方,而统一兼容。尝试一下吧,再也不要乱嵌套了,虽然在Div+CSS的方式下你几乎可以想怎么嵌套就怎么嵌套,但是按照上面的规律你将轻松很多,从而事半功倍!
    六、CSS兼容要点分析IE vs FF
    CSS 兼容要点:
    DOCTYPE 影响 CSS 处理
    FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行
    FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中
    FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width
    FF: 支持 !important, IE 则忽略, 可用 !important 为 FF 特别设置样式
    div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了。缺点是要控制内容不要换行
    cursor: pointer 可以同时在 IE FF 中显示游标手指状, hand 仅 IE 可以
    FF: 链接加边框和背景色,需设置 display: block, 同时设置 float: left 保证不换行。参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格XHTML+CSS兼容性解决方案小集
    使用XHTML+CSS构架好处不少,但也确实存在一些问题,不论是因为使用不熟练还是思路不清晰,我就先把一些我遇到的问题写在下面,省的大家四处找^^
    1、在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法:
    div{margin:30px!important;margin:28px;}
    注意这两个margin的顺序一定不能写反,据阿捷的说法!important这个属性IE不能识别,但别的浏览器可以识别。所以在IE下其实解释成这样:
    div{maring:30px;margin:28px}
    重复定义的话按照最后一个来执行,所以不可以只写margin:XXpx!important;
    2、IE5 和IE6的BOX解释不一致IE5下div{width:300px;margin:0 10px 0 10px;}div的宽度会被解释为300px-10px(右填充)-10px(左填充)最终div的宽度为280px,而在IE6和其他浏览器上宽度则是以300px+10px(右填充)+10px(左填充)=320px来计算的。这时我们可以做如下修改
    div{width:300px!important;width :340px;margin:0 10px 0 10px}
    ,关于这个是什么我也不太明白,只知道IE5和firefox都支持但IE6不支持,如果有人理解的话,请告诉我一声,谢了!:)
    3、ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值所以先定义
    ul{margin:0;padding:0;}
    就能解决大部分问题。
    4、关于脚本,在xhtml1.1中不支持language属性,只需要把代码改为
    < type=”text/java”>
    就可以了
    七、10个你未必知道的CSS技巧
    1、CSS字体属性简写规则
    一般用CSS设定字体属性是这样做的:
    以下为引用的内容:font-weight:bold;font-style:italic;font-varient:small-caps;
    font-size:1em;
    line-height:1.5em;
    font-family:verdana,sans-serif;
       
    但也可以把它们全部写到一行上去:
    font: bold italic small-caps 1em/1.5em verdana,sans-serif;
    真不错!只有一点要提醒的:这种简写方法只有在同时指定font-size和font-family属性时才起作用。而且,如果你没有设定font-weight, font-style, 以及 font-varient ,他们会使用缺省值,这点要记上。
    2、同时使用两个类
    一般只能给一个元素设定一个类(Class),但这并不意味着不能用两个。事实上,你可以这样:

    同时给P元素两个类,中间用空格格开,这样所有text和side两个类的属性都会加到P元素上来。如果它们两个类中的属性有冲突的话,后设置的起作用,即在CSS文件中放在后面的类的属性起作用。
    补充:对于一个ID,不能这样写

    也不能这样写
    3、CSS border的缺省值
    通常可以设定边界的颜色,宽度和风格,如:
    border: 3px solid #000
    这位把边界显示成3像素宽,黑色,实线。但实际上这里只需要指定风格即可。
    如果只指定了风格,其他属性就会使用缺省值。一般地,Border的宽度缺省是medium,一般等于3到4个像素;缺省的颜色是其中文字的颜色。如果这个值正好合适的话,就不用设那么多了。
    4、CSS用于文档打印
    许多网站上都有一个针对打印的版本,但实际上这并不需要,因为可以用CSS来设定打印风格。
    也就是说,可以为页面指定两个CSS文件,一个用于屏幕显示,一个用于打印:
    第1行就是显示,第2行是打印,注意其中的media属性。
    但应该在打印CSS中写什么东西呢?你可以按设计普通CSS的方法来设定它。设计的同时就可以把这个CSS设成显示CSS来检查它的效果。也许你会使用 display: none 这个命令来关掉一些装饰图片,再关掉一些导航按钮。要想了解更多,可以看“打印差异”这一篇。
    5、图片替换技巧
    一般都建议用标准的HTML来显示文字,而不要使用图片,这样不但快,也更具可读性。但如果你想用一些特殊字体时,就只能用图片了。
    比如你想整个卖东西的图标,你就用了这个图片:
    这当然可以,但对搜索引擎来说,和正常文字相比,它们对alt里面的替换文字几乎没有兴趣这是因为许多设计者在这里放许多关键词来骗搜索引擎。所以方法应该是这样的:
    Buy widgets
    但这样就没有特殊字体了。要想达到同样效果,可以这样设计CSS:
    h1 { background: url(/blog/widget-image.gif) no-repeat; height: image height text-indent: -2000px }
    注意把image height换成真的图片的高度。这里,图片会当作背景显示出来,而真正的文字由于设定了-2000像素这个缩进,它们会出现在屏幕左边2000点的地方,就看不见了。但这对于关闭图片的人来说,可能全部看不到了,这点要注意。
    6、CSS box模型的另一种调整技巧
    这个Box模型的调整主要是针对IE6之前的IE浏览器的,它们把边界宽度和空白都算在元素宽度上。比如:
    #box { width: 100px; border: 5px; padding: 20px }
    这样调用它:

    这时盒子的全宽应该是150点,这在除IE6之前的IE浏览器之外的所有浏览器上都是正确的。但在IE5这样的浏览器上,它的全宽仍是100点。可以用以前人发明的Box调整方法来处理这种差异。
    但用CSS也可以达到同样的目的,让它们显示效果一致。
    #box { width: 150px } #box div { border: 5px; padding: 20px }
    这样调用:

    这样,不管什么浏览器,宽度都是150点了。
    7、块元素居中对齐
    如果想做个固定宽度的网页并且想让网页水平居中的话,通常是这样:
    #content { width: 700px; margin: 0 auto }
    你会使用
    来围上所有元素。这很简单,但不够好,IE6之前版本会显示不出这种效果。改CSS如下:
    body { text-align: center } #content { text-align: left; width: 700px; margin: 0 auto }
    这会把网页内容都居中,所以在Content中又加入了
    text-align: left 。
    8、用CSS来处理垂直对齐
    垂直对齐用表格可以很方便地实现,设定表格单元 vertical-align: middle 就可以了。但对CSS来说这没用。如果你想设定一个导航条是2em高,而想让导航文字垂直居中的话,设定这个属性是没用的。
    CSS方法是什么呢?对了,把这些文字的行高设为 2em:line-height: 2em ,这就可以了。
    9、CSS在容器内定位
    CSS的一个好处是可以把一个元素任意定位,在一个容器内也可以。比如对这个容器:
    #container { position: relative }
    这样容器内所有的元素都会相对定位,可以这样用:

    如果想定位到距左30点,距上5点,可以这样:
    #navigation { position: absolute; left: 30px; top: 5px }
    当然,你还可以这样:
    margin: 5px 0 0 30px
    注意4个数字的顺序是:上、右、下、左。当然,有时候定位的方法而不是边距的方法更好些。
    10、直通到屏幕底部的背景色
    在垂直方向是进行控制是CSS所不能的。如果你想让导航栏和内容栏一样直通到页面底部,用表格是很方便的,但如果只用这样的CSS:
    #navigation { background: blue; width: 150px }
    较短的导航条是不会直通到底部的,半路内容结束时它就结束了。该怎么办呢?
    不幸的是,只能采用欺骗的手段了,给这较短的一栏加上个背景图,宽度和栏宽一样,并让它的颜色和设定的背景色一样。
    body { background: url(/blog/blue-image.gif) 0 0 repeat-y }
    此时不能用em做单位,因为那样的话,一旦读者改变了字体大小,这个花招就会露馅,只能使用px。
    ,然后再是
    ,当然
    里面又可以嵌套
    什么的,但是并不建议你嵌套很多东西。
    展开全文
  • IE、FF、Safari、OP不同浏览器兼容报告 1 浏览器内核简介   Trident IE浏览器(GreenBrowser绿色浏览器, 遨游浏览器....都是IE) Geckos FireFox Presto Opera ...
  • 首先谈一下浏览器,虽然现在ie依然是浏览器市场的老大,大约占有67%的份额,但是由于其各方面的欠缺,用户开始选择其他浏览器作为自己浏览网页的主要 工具,比如firefox、theworld、maxthon、chrome、opera等等,在...
  • 在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果! 所有浏览器 通用 height: 100px; IE6 ...
  • 一、简单介绍一下什么浏览器内核。 浏览器最重要或者说核心的部分是“Rendering Engine”,可大概译“解释引擎”,不过我们一般习惯将之称为“浏览器内核”。负责对网页语法的解释(如HTML、JavaScript)并...
  • 浏览器

    2014-12-17 15:12:44
    (一)浏览器 常见的浏览器  .IE内核的浏览器  .非IE内核的浏览器  .常用的浏览器示例  [1]遨游浏览器  [2]世界之窗浏览器  [3]火狐浏览器  [4]谷歌浏览器  (二)搜索引擎 .搜索引擎的概念 .搜索...
  • 培训结束后,我随便搜索了一下,并没有得到理想的结果,可能很少人对Yahoo这么有权威的组织提出的优化法则产生怀疑,也很少人想知道为什么建议这么做,更多的人会唯命是从,墨守成规。之后,我又看了遍优化法则,...
  • 一、在IE部分浏览器中Option未设值时Select将获取空字符串 &lt;!DOCTYPE HTML &gt;  &lt;html&gt;  &lt;head&gt;  &lt;title&gt;IE6/7/8中Option元素未设...
  • 不同渲染方式在浏览器解析情况 从输入页面URL到页面渲染完成大致流程:解析URL->浏览器本地缓存->DNS解析->建立TCP/IP连接->发送HTTP请求->服务器处理请求并返回HTTP报文->浏览器根据深度遍历...
  • 浏览器搜索技巧

    千次阅读 2019-02-23 09:37:28
    搜索引擎我们经常使用,但是我们最常用的可能就是把要搜索的内容直接复制到搜索框,而很多时候这样搜索出来的结果有很多的冗余信息,对于获取自己所需要的内容甚至存在阻碍。我们如何更加快速地获取我们想要的信息呢...
  • 为什么Chrome比其他浏览器快?

    万次阅读 2017-04-20 21:31:09
    为什么Chrome比其他浏览器快? Google Chrome的历史和指导性原则 Google Chrome最初是2008年下半年作为Windows平台上的一个beta版本发布的。Google还将自己编写的Chrome在BSD许可下进行了开源——称为Chromium。...
  • 在其他浏览器都正常,唯独只有谷歌chrome浏览器不行,问题的最直接现象就是每次请求在后台过滤器里通过request.getSession().getId(),拿到的id都是不同的,导致后面出现一些不正常的结果。 最后在查阅一翻资料和...
  • 无论是电商卖家或是羊毛党还是做广告营销,关联问题都是个棘手问题,其实这个关联问题也就是浏览器指纹所导致的,那么什么浏览器指纹呢? 基本指纹: 是任何浏览器都具有的特征标识,比如硬件类型、操作系统...
  • 从发送请求到服务器响应至浏览器都发生了什么? ** 输入网址回车后,浏览器首先要做DNS解析 1.搜索浏览器的DNS缓存 2.搜索操作系统自身的DNS缓存 3.搜索hosts文件 4.通过dns客户端向dns服务器发送解析请求...
  • 利用浏览器实现高效搜索

    千次阅读 热门讨论 2018-02-11 19:16:14
    每页的搜索结果数量 搜索工具(时间) 网页快照 逻辑 类型 搜索引擎选择 谷歌 百度 搜狗(微信) 必应  搜索引擎好处 使不同来源的信息纵向对比变的容易 站内检索 tag 使用 友链 学习的方法 ...
  • 文章目录目录本文构思补充上文的不足(Google安装油猴)常见浏览器内核的比较浏览器使用推荐谷歌介绍火狐介绍为什么追求高效搜索 本文构思 本文将补充上一篇文章中的部分不足,以及分享在日常生活中对于想打造一款...
  • 一、由来已久的分发问题 你一定有过或正在经历类似这样的情况,当你打开浏览器,看到一个关于李连杰的武打场面的短视频,从小喜爱李连杰...第二天,你再一次打开了浏览器,你发现在浏览器的内容推荐区出现了以前从...
  • 浏览器存储

    千次阅读 2020-07-17 17:11:17
    浏览器存储数据 在开发过程中,有些数据我们需要多次用到,但是如果每一次需要就去和服务器请求,那么无疑会造成一定的资源浪费,所以我们可以根据业务需求,把一些数据在浏览器中存储起来,目前最常见的存储方案是...
  • 有C#编写的浏览器,实现浏览器的一些常用功能,还有集合搜索的功能,可以在同一窗体内看到不同搜索引擎搜素偶的结果。如果想开发自己的简易浏览器或做集合搜素,本程序将值得你学习一下。运行过程中有问题可以联系我...
  • android 浏览器

    万次阅读 2012-06-15 13:45:44
    Android 4.0 Browser增加了表单自动填充功能,比较了一下UC、QQ、Opera、海豚浏览器等,都没有提供此项功能。问了很多人,也没人用过,所以就上网收集了相关资料。 先看看维基百科关于autofill词条的解释吧: ...
  • chrome浏览器

    万次阅读 2014-08-18 21:51:29
    : 支持谷歌、百度、有道、必应四大翻译和朗读引擎,可以方便的查看、复制和朗读不同引擎的翻译结果。直接在网页上划词或者右键,还可以输入其它地方的句子到导航栏中的拓展程序中翻译,相当好用。 Super Drag :...
  • 浏览器提示的"不安全"到底是什么

    万次阅读 多人点赞 2020-04-04 21:34:29
    本文简要介绍了HTTPS的概念以及浏览器为提示“不安全”的几种情况及其原因。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 143,355
精华内容 57,342
关键字:

不同浏览器搜索的结果为什么不同