5招方法完全解决浏览器兼容问题

CSS不兼容的原因是因为各浏览器给CSS默认属性值不一样造成的

第一招:给常用的CSS规定属性值

body,div,dl,dt,dd,ol,h1,h2,h3,h4,h5,h6,form,input,p,th,td{margin:0; padding:0;}

img{border:0;}

ul{margin:0; padding:0;} ul li{list-style:none;}

上面的建站常用代码就像是格式化CSS样式,让各浏览器按照我们设置的属性值渲染网页

或者这样写代码:*{margin:0; padding:0;}

第二招:IE和FF下对象居中问题

IE下大家应该知道只要设置body{text-align:center;}这样就可以居中显示了,但是这样的方法在FF中不行的。这里就需要给修成body{text-align:center; margin:0 auto;}margin的意思就是上下距离为0像素,左右为自动,所以FF就正常显示了

第三招:垂直居中(仅只适用于一行)

比如说一个高30px的div,问题默认时会显示在左上角,如果想垂直居中对其可以加个line-height:30px;样式。如果你想让他居下方则在修改line-height:30px;数值越大越居下,为了防止撑破层,还需要再给一个样式overflow:hidden;(超出的部分不显示)

第四招:给每一个快对象设置三个样式

Width:**px; height:**px; overflow:hidden; 即高、宽是属性值是自动那么也需要去设置这三个样式。目的就是解决浏览器默认值的问题

第五招:针对IE6/IE7/FF的css样式(这一招在特殊情况下经常用到)

原来建设网站经常用!important来设置优先权,但有了IE7之后就不行了。下面给大家个可以解决IE6/IE7/FF各个css优先权的方法

#1{color:#333;}/*FF环境*/

*html #1{color:#666;}/*IE6环境*/

*+html #1{color:#999;}/*IE7环境*/

上面的书写顺序一定不能去改变。

这样子网页在FF下显示#333,IE6下显示#666,IE7下显示#999.

原文地址:https://www.cnblogs.com/xiaoyunxiao/p/2406988.html