关于浏览器的兼容性总结

 1.属性清零,页面在浏览器中看起来不一样的原因都是因为浏览器对默认属性的解释不一样。所以都清一下。

*{margin:0;padding:0}

2.有浮动后，记得清除浮动

<div style="float:right">向右浮动</div>

<div style="clear:both"></div>

<div>下面的内容</div>

3.li.浏览器对于li的输出效果也不一样。

li{list-style-position:inside}

4.少用position。在用position的时候一定要记住 absolute 和 relative 要成对的应用

<div style="position:relative">

<div style="position:absolute;top:5px;right:10px;">

          relative下面套absolute。不然这个div的定位圆点会是浏览器的左上角

</div></div>

5.水平居中的问题

设置 text-align: center  

ie6-7文本居中，嵌套的块元素也会居中

ff /opera /safari /ie8文本会居中，嵌套块不会居中

解决：块元素设置

1、margin-left:auto;margin-right:auto

2、margin:0 auto;

3、<div align=”center”></div>

6.垂直居中的问题

在浏览器中想要垂直居中，设置vertical-align:middle; 不起作用。

例如：ie6下文本与文本输入框对不齐，需设置vertical-align:middle，但是文本框的内容不会垂直居中

解决：给容器设置一个与其高度相同的行高

line-height:与容器的height一样

7.关于高度问题

如果是动态地添加内容，高度最好不要定义。浏览器可以自动伸缩，然而如果是静态的内容，高度最好定好。

如果设定了高度，内容过多时，ie6下会自动增加高度、其他浏览器会超出边框

解决：

1.设置           overflow:hidden;

2.高度自增    height:auto!important;height:100px;

8.td高度的问题

table中td的宽度都不包含border的宽度，但是oprea和ff中td的高度包含了border的高度
解决：
设置line-height和height一样。在ie中如果td中的没有内容，那么border将不会显示

9.div嵌套p时，出现空白行

div中显示<p>文本</p>，ff、oprea、Chrome：top和bottom都会出现空白行，但是在ie下不会出现空白行。

解决：

设置p的margin:0px，再设置div的padding-top和padding-bottom

10.ul设置的说明

说明：

ul一般设置：list-style-type:none;margin:0px;padding:0px;

li一般设置：list-style-type:none; list-style-position:outside;

 ul或li浮动后，显示在div外

问题：div中的ul或li设置float以后，都不在div中

解决：必须在ul标签后加<div style="clear:both"></div>来闭合外层div

 ul浮动后，margin变大

问题：ul设置 float后，在ie中margin将变大

解决：设置ul的display:inline，li的list-style-position:outside;

11.使一个层垂直居中于浏览器中

说明：

使用百分比绝对定位,与外补丁负值的技巧,负值的大小为其自身宽度高度除以二

div {
position:absolute; top:50%; lef:50%; margin:-100px 0 0 -100px;

width:200px; height:200px; border:1px solid red;
}

12.IE不支持float：inherit  overflow:hidden有2个用法，一个是隐藏溢出，另一个是清除浮动。

<div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子

<span>, <a>, <label>, <input>, <img>, <strong> 和<em>是inline元素

 

13. 在head标签中加入meta 类型<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />，这样就解决了ie7、ie8兼容问题。

14.ie6、ie7、Firefox、Chrome(Safari与Chrome使用同一内核)、Opera这几种浏览器的兼容性问题，需要使用CSS Hack来解决该问题。

15.!important只适用于IE6，初次之外，其他浏览器都可识别。

16.

CSS代码：

<style type=”text/css”>
#body {
border:2px solid #00f;     /*ff的属性*/
border:2px solid #090\9;   /* IE6/7/8的属性 */
border:2px solid #F90\0;     /* IE8支持 */
_border:2px solid #f00;     /*IE6的属性*/
}

</style>

html代码:

<div id=”body”>
<ul>
<li>FF下蓝边</li>
<li>IE6下红边</li>
<li>IE7下绿边</li>
<li>IE8下黄边</li>
</ul>
</div>
注:css顺序不能写错，因为ff不认识\9,\0,_写法,所以为蓝边;\9是IE6，7，8的属性,下面代码并没有重写IE7的代码，所以IE7下绿边;同理,\0为ie8属性，相当于重写了颜色，所以IE8下为黄边,_是ie6的属性,重写颜色为红边.