资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/谈一谈浏览器兼容问题

谈一谈浏览器兼容问题

wangzy2019 / 906人阅读

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

浏览器兼容问题 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...
云服务器 GPU云服务器 兼容问题 js兼容 浏览器兼容 兼容性问题 Js的兼容问题

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/85142.html

相关文章

  • 谈一谈几种处理JavaScript异步操作的办法

    摘要：问题是处理完了，却也引发了自己的一些思考处理的异步操作，都有一些什么方法呢一回调函数传说中的就是来自回调函数。而回调函数也是最基础最常用的处理异步操作的办法。 引言 js的异步操作，已经是一个老生常谈的话题，关于这个话题的文章随便google一下都可以看到一大堆。那么为什么我还要写这篇东西呢？在最近的工作中，为了编写一套相对比较复杂的插件，需要处理各种各样的异步操作。但是为了体积和兼容...

    曹金海 评论0 收藏0

  • 谈一谈javascript异步

    摘要：从今天开始研究一下的异步相关内容，感兴趣的请关注同期异步系列文章推荐异步中的回调异步与异步之异步之异步之和异步之一异步之二异步实战异步总结归档什么是异步我们知道的单线程的，这与它的用途有关。 从今天开始研究一下javascript的异步相关内容，感兴趣的请关注 同期异步系列文章推荐javascript异步中的回调javascript异步与promisejavascript异步之Prom...

    Sourcelink 评论0 收藏0

  • 谈一谈移动端1px的问题

    摘要：今天想写的问题来自于网易一面的时候，面试官问我如何在移动端的页面上画一条的线。上面的结论我在端谷歌浏览器的设备模拟器里证实了有效，但是安卓和真机并没有试过。 起因 最近一个月都在准备校招，所以没什么时间写博客。今天想写的问题来自于网易一面的时候，面试官问我如何在移动端的页面上画一条1px的线。这个问题我模糊地记得之前看过相关文章，但是我清楚地记得当时自己脑子一片空白。是的，一面挂了，但...

    qianfeng 评论0 收藏0

  • 来，让我们谈一谈Normalize.css

    摘要：相比于传统的，是一种现代的为准备的优质替代方案。保护了有价值的默认值通过为几乎所有的元素施加默认样式，强行使得元素有相同的视觉效果。当一个元素在不同的浏览器中有不同的默认值时，会力求让这些样式保持一致并尽可能与现代标准相符合。 本文译自 http://nicolasgallagher.com/about-normalize-css/ 最初发布于我的博客：http://jerr...

    _Zhao 评论0 收藏0

  • iframe,我们来谈一谈

    摘要：通常我们可以在后配置各种指定资源路径，有如果你未指定的话，则是使用规定的加载策略默认配置就是同域这里和有一点瓜葛的就是和就是用来指定的有效加载路径。 某大咖说: iframe是能耗最高的一个元素，请尽量减少使用某大牛说: iframe安全性太差，请尽量减少使用...wtf, 你们知不知道你们这样浇灭了多少孩纸学习iframe的热情和决心。 虽然，你们这样说的我竟无法反驳，但是ifram...

    awesome23 评论0 收藏0

发表评论

登陆后可评论

0条评论

wangzy2019

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<