浏览器兼容

为什么产生浏览器兼容,浏览器兼容问题什么是浏览器兼容;

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

浏览器兼容产生的原因;

因为不同浏览器使用内核及所支持的HTML等网页语言标准不同。

以及用户客户端的环境不同(如分辨率不同)造成的显示效果不能达到理想效果。

最常见的问题就是网页元素位置混乱,错位。

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

① . 不同浏览器的标签默认的外补丁和内补丁不同

问题症状:随便写几个标签,不加样式控制的情况下,各自的margin 和padding差异较大。

解决方案:CSS里 *{margin:0;padding:0;}

② . 块属性标签float后,又有横行的margin情况下,在IE6显示margin比设置的大

问题症状:常见症状是IE6中后面的一块被顶到下一行

解决方案:在float的标签样式控制中加入 display:inline;将其转化为行内属性

③ . 设置较小高度标签(一般小于10px),在IE6,IE7,遨游中高度超出自己设置高度

问题症状:IE6、7和遨游里这个标签的高度不受控制,超出自己设置的高度

解决方案:给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。

④ . 行内属性标签,设置display:block后采用float布局,又有横行的margin的情况,IE6间距bug

问题症状:IE6里的间距比超过设置的间距

解决方案:在display:block;后面加入display:inline;display:table;

⑤ . 图片默认有间距

问题症状:几个img标签放在一起的时候,有些浏览器会有默认的间距,加了问题一中提到的通配符也不起作用。

解决方案:使用float属性为img布局 (我的一个学生使用负margin,虽然能解决,但负margin本身就是容易引起浏览器兼容问题的用法,所以我禁止他们使用)

⑥ . 标签最低高度设置min-height不兼容

问题症状:因为min-height本身就是一个不兼容的CSS属性,所以设置min-height时不能很好的被各个浏览器兼容

解决方案:如果我们要设置一个标签的最小高度200px,需要进行的设置为:{min-height:200px; height:auto !important; height:200px; overflow:visible;}

⑦ . 居中问题

问题症状:div里的内容,IE默认为居中,而FF默认为左对齐

解决方案:可以尝试增加代码margin: 0 auto;

⑧ . margin加倍的问题

问题症状:设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。

解决方案:在这个div里面加上 display:inline;

⑨ . IE捉迷藏的问题

问题症状:当div应用复杂的时候每个栏中又有一些链接,这个时候容易发生捉迷藏的问题。 有些内容显示不出来,当鼠标选择这个区域是发现内容确实在页面。

解决办法:对#layout使用line-height属性或者给#layout使用固定高和宽。页面结构尽量简单。

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

浏览器内核

  • Trident(IE内核)

  • Gecko(Firefox内核)

  • Webkit(谷歌、Safari、360极速浏览器以及搜狗高速浏览器)

WebKit内核常见的浏览器:傲游浏览器3、[1] Apple Safari (Win/Mac/iPhone/iPad)、Symbian手机浏览器、Android 默认浏览器

>Presto(Opera前内核) (已废弃)

seo 搜索引擎优化

搜索引擎 百度 排名 搜索 ip pv

搜索引擎优化 百度专门给技术 提供优化方案 白皮书 百度竞价 收费

前端作业面的时候 也会针对 seo 进行一系列优化

1 . 搜索引擎工作原理

当我们在输入框中输入关键词,点击搜索或查询时,然后得到结果。深究其背后的故事,搜索引擎做了很多事情。

在搜索引擎网站,比如百度,在其后台有一个非常庞大的数据库,里面存储了海量的关键词,而每个关键词又对应着很多网址,这些网址是百度程序从茫茫的互联网上一点一点下载收集而来的,这些程序称之为“搜索引擎蜘蛛”或“网络爬虫”。这些勤劳的“蜘蛛”每天在互联网上爬行,从一个链接到另一个链接,下载其中的内容,进行分析提炼,找到其中的关键词,如果“蜘蛛”认为关键词在数据库中没有而对用户是有用的便存入数据库。反之,如果“蜘蛛”认为是垃圾信息或重复信息,就舍弃不要,继续爬行,寻找最新的、有用的信息保存起来提供用户搜索。当用户搜索时,就能检索出与关键字相关的网址显示给访客。

一个关键词对用多个网址,因此就出现了排序的问题,相应的当与关键词最吻合的网址就会排在前面了。在“蜘蛛”抓取网页内容,提炼关键词的这个过程中,就存在一个问题:“蜘蛛”能否看懂。如果网站内容是flash和js,那么它是看不懂的,会犯迷糊,即使关键字再贴切也没用。相应的,如果网站内容是它的语言,那么它便能看懂,它的语言即SEO。

http://www.cnblogs.com/EnSnai...

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

2 . 搜索引擎工作原理

① . 抓取网页。每个独立的搜索引擎都有自己的网页抓取程序爬虫(spider)。爬虫Spider顺着网页中的超链接,从这个网站爬到另一个网站,通过超链接分析连续访问抓取更多网页。被抓取的网页被称之为网页快照。由于互联网中超链接的应用很普遍,理论上,从一定范围的网页出发,就能搜集到绝大多数的网页。

② . 处理网页。搜索引擎抓到网页后,还要做大量的预处理工作,才能提供检索服务。其中,最重要的就是提取关键词,建立索引库和索引。其他还包括去除重复网页、分词(中文)、判断网页类型、分析超链接、计算网页的重要度/丰富度等。

③ . 提供检索服务。用户输入关键词进行检索,搜索引擎从索引数据库中找到匹配该关键词的网页;为了用户便于判断,除了网页标题和URL外,还会提供一段来自网页的摘要以及其他信息。

yahoo军规

35条 http://www.cnblogs.com/xianyu...

css hack

http://blog.csdn.net/freshlov...

( 待续 ………… )

web前端 关于浏览器兼容的一些知识和问题解决的更多相关文章

  1. web前端开发浏览器兼容性 - 持续更新

    浏览器兼容性问题又被称为网页或网站兼容性问题:不同浏览器内核及所支持的html等网页语言标准不同,不同客户端环境(如分辨率不同)造成实际显示效果未能达到预期理想效果 首先我们来看一下目前市面上常见的一 ...

  2. web前端开发浏览器兼容性处理大全

    1.居中问题 div里的内容,IE默认为居中,而FF默认为左对齐,可以尝试增加代码margin: 0 auto; 2.高度问题 两上下排列或嵌套的div,上面的div设置高度(height),如果di ...

  3. WEB前端:浏览器(IE+Chrome+Firefox)常见兼容问题处理--01

    兼容问题目录 1.IE6下怪异盒模型 2.IE6下最小高度问题 3.IE6下不支持1px的点线 4.IE6下内容会把父级的高度撑开 5.IE6下只支持给a标签添加伪类 6.IE67下不支持给块标签加d ...

  4. web前端之浏览器: 知识汇总

    一.URL到页面 准备阶段: 输入URL,Enter进入查找 浏览器在本地查找host文件,匹配对应的IP: 找到返回浏览器并缓存 没有,则进入路由查找: 找到返回浏览器并缓存 再没有,再进入公网DN ...

  5. WEB前端:浏览器(IE+Chrome+Firefox)常见兼容问题处理--03

    兼容问题目录 16.IE67下子级有相对定位,并且比父级要大.那父级overflow:hidden;后是包不住它的 17.IE6下同一层级的浮动元素会盖住绝对定位元素 18.IE6下定位父级的宽高是奇 ...

  6. WEB前端:浏览器(IE+Chrome+Firefox)常见兼容问题处理--02

    兼容问题目录 8.IE6不支持固定定位 9.IE6下前面元素浮动,后面元素不浮动后他们之间会有间隙 10.IE6下双边距问题 11.IE67下父级有边框,子级有margin的话会不起作用 12.IE6 ...

  7. Web前端--黑客技术揭秘(菜鸟知识)

    一,Web安全的关键点 1.同源策略是众多安全策略的一个,是Web层面上的策略.很重要. 2.同源策略规定:不同域的client脚本在没明白授权的情况下.不能读写对方的资源. 3.同域要求两个网站同协 ...

  8. web font各浏览器兼容问题以及格式

    语法: @font-face { font-family: <identifier>; src: <fontsrc> [, <fontsrc>]*; <fon ...

  9. 整理六百篇web前端知识混总

    9个有用的和免费的工具来支持动态网页开发 8个基本的引导工具的网页设计师 11款CSS3动画工具的开发 2016年某前端群题目答案参考 9最好的JavaScript压缩工具 创建响应式布局的10款优秀 ...

随机推荐

  1. 项目server中设置session timeout遇到的问题

    RT:在项目server中的web.xml设置session timeout=10,当10分钟后,继续右键执行jsp文件,运行失败,如下图所示: 但是单独启动tomcat server后,在浏览器中输 ...

  2. 文件流下载时 axios blob文件大小不正确?

    文件流下载时 js blob文件大小不正确? res.data的字节长度 length blob.size匹配不上.. axio请求里必须修改 responseType: 'blob' 参数, 默认是 ...

  3. intel windows caffe加速

    网址: https://github.com/BeFreeRoad/intel_caffe_windows 将intel caffe从linux平台移植到windows平台. 性能: 在虚拟机上测试可 ...

  4. fcntl()函数之非阻塞模型

    优点:设置标准输入为非阻塞(有数据则读 没有数据则立即返回),常用于网络通信以及轻量信息多并发中 步骤: 1.oldflag=fcntl(STDIN_FILENO,F_GETFL); 获取标准输入的文 ...

  5. plsql登录,tables表为空解决方案

    共两种方法,第一种不行,再试下第二种: 第一种: plsql tables 表存在,但是看不到所有的表信息 将C:\Windows\Prefetch目录下,几个PLSQL DEVELOPER***** ...

  6. Java生成随机图片验证码

    前台html代码 [Java] 纯文本查看 复制代码 ? 01 02 03 04 05 06 07 08 09 10 <div style="margin-top: 50px;&quo ...

  7. AngularJS中格式化日期为指定格式字符串

    var date = $filter('date')(new Date(),'MM/dd/yyyy');

  8. .net core && python

    最近.net core的发展,确实值得激动,强力推荐传教文章<.NET:持续进化的统一开发平台>http://www.cnblogs.com/wer-ltm/p/8776846.html ...

  9. 吴裕雄--天生自然python学习笔记:Python3 函数

    函数是组织好的,可重复使用的,用来实现单一,或相关联功能的代码段. 函数能提高应用的模块性,和代码的重复利用率.你已经知道Python提供了许多内建函数,比如print().但你也可以自己创建函数,这 ...

  10. php--ip的处理

    1.获取ip /**获取请求ip**/ function _get_request_ip(){ //strcasecmp 比较两个字符,不区分大小写.返回0,>0,<0. if(geten ...