谈一谈浏览器兼容问题

浏览器兼容问题

1、什么是浏览器兼容

所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况。

2、浏览器兼容产生的原因

因为不同浏览器使用内核及所支持的HTML等网页语言标准不同;
以及用户客户端的环境不同(如分辨率不同)造成的显示效果不能达到理想效果。
最常见的问题就是网页元素位置混乱,错位。

3、浏览器兼容问题以及怎么解决

3.1、不同浏览器的标签默认的外补丁和内补丁不同
问题症状:随便写几个标签,不加样式控制的情况下,各自的margin 和padding差异较大。
解决方案:CSS里 *{margin:0;padding:0;}
3.2、块属性标签float后,又有横行的margin情况下,在IE6显示margin比设置的大
问题症状:常见症状是IE6中后面的一块被顶到下一行
解决方案:在float的标签样式控制中加入 display:inline;将其转化为行内属性
3.3、设置较小高度标签(一般小于10px),在IE6,IE7,遨游中高度超出自己设置高度
问题症状:IE6、7和遨游里这个标签的高度不受控制,超出自己设置的高度
解决方案:给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。
3.4、行内属性标签,设置display:block后采用float布局,又有横行的margin的情况,IE6间距bug
问题症状:IE6里的间距比超过设置的间距
解决方案:在display:block;后面加入display:inline;display:table;
3.5、图片默认有间距
问题症状:几个img标签放在一起的时候,有些浏览器会有默认的间距,加了问题一中提到的通配符也不起作用。
解决方案:使用float属性为img布局 (我的一个学生使用负margin,虽然能解决,但负margin本身就是容易引起浏览器兼容问题的用法,所以我禁止他们使用)
3.6、标签最低高度设置min-height不兼容
问题症状:因为min-height本身就是一个不兼容的CSS属性,所以设置min-height时不能很好的被各个浏览器兼容
解决方案:如果我们要设置一个标签的最小高度200px,需要进行的设置为:{min-height:200px; height:auto !important; height:200px; overflow:visible;}
3.7、居中问题
问题症状:div里的内容,IE默认为居中,而FF默认为左对齐
解决方案:可以尝试增加代码margin: 0 auto;
3.8、margin加倍的问题
问题症状:设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。
解决方案:在这个div里面加上 display:inline;
3.9、IE捉迷藏的问题
问题症状:当div应用复杂的时候每个栏中又有一些链接,这个时候容易发生捉迷藏的问题。 有些内容显示不出来,当鼠标选择这个区域是发现内容确实在页面。
解决办法:对#layout使用line-height属性或者给#layout使用固定高和宽。页面结构尽量简单。

以上是常见的浏览器兼容问题,还有很多,可以自己去网上看!

4、浏览器内核

4.1、Trident(IE内核)
4.2、Gecko(Firefox内核)
4.3、Webkit(谷歌、Safari、360极速浏览器以及搜狗高速浏览器)
WebKit内核常见的浏览器:傲游浏览器3、[1] Apple Safari (Win/Mac/iPhone/iPad)、Symbian手机浏览器、Android 默认浏览器
4.4、Presto(Opera前内核) (已废弃)

5、seo 搜索引擎优化

很早以前搜索引擎优化百度百度专门给技术人员提供优化方案,是一本白皮书。

搜索引擎工作原理

1、抓取网页。每个独立的搜索引擎都有自己的网页抓取程序爬虫(spider)。爬虫Spider顺着网页中的超链接,从这个网站爬到另一个网站,通过超链接分析连续访问抓取更多网页。被抓取的网页被称之为网页快照。由于互联网中超链接的应用很普遍,理论上,从一定范围的网页出发,就能搜集到绝大多数的网页。
2、处理网页。搜索引擎抓到网页后,还要做大量的预处理工作,才能提供检索服务。其中,最重要的就是提取关键词,建立索引库和索引。其他还包括去除重复网页、分词(中文)、判断网页类型、分析超链接、计算网页的重要度/丰富度等。
3、提供检索服务。用户输入关键词进行检索,搜索引擎从索引数据库中找到匹配该关键词的网页;为了用户便于判断,除了网页标题和URL外,还会提供一段来自网页的摘要以及其他信息。
http://www.cnblogs.com/EnSnai…

6、yahoo军规

14条 http://www.cnblogs.com/Yellow…
35条 http://www.cnblogs.com/xianyu…
    原文作者:Besmall
    原文地址: https://segmentfault.com/a/1190000010964201
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞