博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
浏览器兼容性
阅读量:4507 次
发布时间:2019-06-08

本文共 1190 字,大约阅读时间需要 3 分钟。

一、浏览器兼容性简介

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

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

可以参考这个:。

 

二、兼容性详解

主要是以下三个方面:

 

三、全局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的标准,因此,我们尽量少用。如果你调试兼容性,调试不好时,可以偶尔用一下。
 

转载于:https://www.cnblogs.com/mingc/p/6024635.html

你可能感兴趣的文章
IE下的document.onclick问题
查看>>
[模板]后缀数组
查看>>
git添加本地文件到github仓库
查看>>
0502《构建之法》第六、七章读后感
查看>>
[福大软工] Z班——Beta现场答辩反馈
查看>>
利用Pycharm本地调试spark-streaming(包含kafka和zookeeper等操作)
查看>>
Web控件
查看>>
状压DP泛做
查看>>
The New Stack:KubeEdge将Kubernetes的能力延伸至边缘
查看>>
Datatable的Select()
查看>>
Django之中间件
查看>>
博客作业05--查找
查看>>
SQL面试题目汇总
查看>>
为何img、input等内联元素可以设置宽、高
查看>>
Java知识总结---整合SpringMVC+Mybatis+Spring(二)
查看>>
android android:duplicateParentState="true" "false"
查看>>
HDU 3507 Print Article (斜率优化)
查看>>
Web 设计师的 50 个超便利工具(下)
查看>>
C++底层数据结构实现
查看>>
Python学习(二)
查看>>