浏览器兼容性

mingc mingc     2022-08-11     757

关键词:

一、浏览器兼容性简介

同一个网页,在不同的浏览器下,显示的效果可能不同,也就是所谓的“兼容性”。

兼容性调试,主要调试IE8、IE7、IE6、Firefox。

可以参考这个:浏览器市场份额调查

 

二、兼容性详解

主要是以下三个方面:

全局CSS设置

常用的兼容性调试技巧

CSS HACK

 

三、全局CSS设置

1. 清除所有标记的内外边距

body,ul,li,a,img,p,input{ margin:0; padding:0; }

2. 去除项目符号或编号前面的符号

ul,ol,li{ list-style:none; }

3. 全局链接效果

a:link , a:visited{color:#444;text-decoration:none;}

a:hover{color:red;}

4. 网页中所有的文字大小颜色

body{ font-size:12px; font-family:宋体; color:#ccc; }

5. 去除图片的链接边框线

img{border:0;}

6. 全局的类样式

.floatL{ float:left; }

.floatR{ float:right; }

.clear{clear:both;}

.blank10{ height:10px; clear:both; }

.red{ color:red; }

.blue{ color:blue; }

 

四、常用的兼容性调试技巧

1. 实现所有浏览器的主页居中

Firefox下主页居中代码:.box{margin:0px auto}

IE5.5下主页居中代码:body{text-align:center;}

2. 单行文本上下居中

h1{

  height: 30px;

  leight-height: 30px;

}

3. 在IE6下,左右margin会加倍,似乎是IE6的一个bug。

提示:排版时,能使用padding解决的,坚决不用margin。如果实在想用的话,就使用其中一边。

解决方案:使用 display: inline;

 

五、CSS HACK

针对不同浏览器,书写不同的CSS代码的过程,称为“CSS HACK”。

也就是说,写一个CSS代码,让IE6识别,其他浏览器不识别。

下面,针对不同的浏览器,有几个符号:

这些符号实在CSS属性的前面加的,用于分辨不同的浏览器版本。

"*" IE6和IE7都识别。如:.box{ *background-color:red; }

"_” 只有IE6识别。如:.box{ _background-color:green;}

使用CSS HACK来处理,IE6下左右margin会加倍的问题

注意:CSSHACK不是W3C的标准,因此,我们尽量少用。如果你调试兼容性,调试不好时,可以偶尔用一下。
 

兼容性问题

概念解释1:所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况概念解释2:浏览器兼容性问题又被称为网页兼容性或网站兼容性问题,指网页在各种浏览器上的显示效... 查看详情

谷歌浏览器兼容性视图设置在哪里(chrome浏览器兼容性视图设置在哪)

...大家分享一下,谷歌兼容性设置在哪儿呢。首先鼠标选中浏览器;然后单击鼠标左键,在弹出的菜单中点击兼容性疑难进入;最后在兼容性设置界面添加兼容性视图中的网站,并把下方的两项勾选确定即可。谷歌将在Chrome上推出... 查看详情

edge浏览器兼容性设置在哪里设置

edge浏览器兼容性设置在哪里设置edge浏览器兼容性设置在哪里?Edge浏览器是随着微软最新Windows10系统一起发布的全新浏览器,既然是全新浏览器,那就会出现与现有网站兼容性的问题,如果我们的浏览的网站与Edge不兼容,那就... 查看详情

前端兼容性问题——总览

在Web前端开发中,浏览器兼容性问题是一个常见的挑战。由于不同的浏览器实现了不同的标准和规范,因此相同的代码在不同的浏览器上可能会有不同的表现,或者甚至无法正常工作。前端兼容性问题——总览在Web前端开发中,... 查看详情

浏览器兼容性问题

浏览器兼容性问题一直以来都是网页设计者的最头痛的问题,不同的浏览器所展示的网页效果不同,在网页的布局上出现不同的样式,同一板块可能会因为不同的浏览器展现的效果是出现移位的现象。首先了解浏览器会出现兼容... 查看详情

浏览器兼容性问题

浏览器兼容性模式想必你一定知道浏览器有个标准(Standards)模式和一个怪异(Quirks)模式,或许你还听说过有个“准标准(AlmostStandards)”模式。而当你打开InternetExplorer的时候,又看到了什么浏览器模式、文档模式,还有什... 查看详情

浏览器兼容性问题简介

为什么会有兼容问题?由于市场上浏览器种类众多,而不同浏览器其内核亦不尽相同,所以各个浏览器对网页的解析就有一定出入,这也是导致浏览器兼容问题出现的主要原因,我们的网页需要在主流浏览器上正常运行,就需要... 查看详情

浏览器的兼容性测试

 浏览器的兼容性测试 1 常见的浏览器Firefox:跨多个操作系统平台,兼容性强,速度快,还有一些有用的插件。Chrome:软件体积小,速度快,安全性高,简洁。IE:速度慢,微软已停止对其进行后续的技术支持。Safari... 查看详情

Mobilefirst 桌面浏览器环境浏览器兼容性

】Mobilefirst桌面浏览器环境浏览器兼容性【英文标题】:MobilefirstDesktopBrowserEnvironmentbrowsercompatibility【发布时间】:2016-01-1217:20:19【问题描述】:对于在mobilefirst(7.1)中具有“桌面浏览器环境”的项目,是否存在某种“浏览器兼容... 查看详情

常见浏览器兼容性问题

先上图:可以看出现在主流浏览器明显就是chrome了,当然还有相当一部分IE用户,所以浏览器兼容性的讨论依然没有过期~我们来讨论IE7+和现代浏览器的兼容性吧,我们分开两部分 样式兼容 和 脚本兼容一.样式兼容1)... 查看详情

常见的浏览器兼容性问题总结

1、https://blog.csdn.net/zhuwanwanshay/article/details/51882923(常见的浏览器兼容性问题总结)2、http://www.jb51.net/article/55193.htm(css与javascript跨浏览器兼容性总结)3、https://blog.csdn.net/helloxiaoliang/article/details/5136 查看详情

浏览器兼容性一

出现浏览器兼容原因  所谓的浏览器兼容性问题,是指:因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况。在大多数情况下,我们的需求是,用户用任何浏览器来查看我们的网站或者登陆我们的... 查看详情

css浏览器兼容性与解决方法

一.什么是浏览器兼容性问题?所谓的浏览器兼容性问题,是指不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况;而造成浏览器兼容问题的根本原因,是浏览器的内核不同导致的。认识浏览器内核 &n... 查看详情

浏览器兼容性以及写法

浏览器的兼容性以及写法第一个清除浮动的兼容性第二个透明度的兼容写法第三个js获取节点的兼容写法清楚浮动在低版本浏览器不行,需要处理兼容性加一个.clearfix*zoom:1;为什么加了 .clearfix*zoom:1;它是专门针对Ie6/7低版... 查看详情

浏览器兼容性问题及解决方案

所谓的浏览器兼容性问题,是指因为不同的浏览器对不同的代码有不同的解析,造成页面效果显示不统一的情况。在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们的系统,都应该是统一的... 查看详情

foreignObject 浏览器兼容性

】foreignObject浏览器兼容性【英文标题】:foreignObjectbrowsercompatibility[closed]【发布时间】:2018-11-2513:08:26【问题描述】:我想在svg中使用foreignObject来(有条件地)呈现输入字段。在有关foreignObject的MDN文档中(参见上面的链接),... 查看详情

常见浏览器兼容性问题与解决方案

常见浏览器兼容性问题与解决方案原文:http://blog.csdn.net/chuyuqing/article/details/37561313/所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况。在大多数情况下,我们的需求... 查看详情

win10系统edge浏览器兼容性的解决方法

我们在操作win10电脑的时候,常常会遇到win10系统Edge浏览器兼容性的问题。那么出现win10系统Edge浏览器兼容性的问题该怎么解决呢?很多对电脑不太熟悉的小伙伴不知道win10系统Edge浏览器兼容性到底该如何解决?其实只需要在Edge... 查看详情