web前端兼容性整理+完善
【技巧类】
1、对一些标签统一规范。
2、padding，marign，height，width
写好标准头
1 <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
2 <html xmlns=”http://www.w3.org/1999/xhtml”>
高尽量用padding，慎用margin，height尽量补上100%，父级height有定值子级height不用100%，子级全为浮动时底部补个空clear:both的div宽尽量用margin，慎用padding，width算准实际要的减去padding
clear:both;
1 .clearfix:after {
2
3 content: ".";
4 display: block;
5 height: 0;
6 clear: both;
7 visibility: hidden;
8
9 }
【兼容方法类】
1、背景、图片类
>> background显示问题
全部注意补齐 width，height 属性
>>背景透明问题
IE: filter: progid: DXImageTransform.Microsoft.Alpha(style=0,opacity=60);
IE: filter: alpha(opacity=10);
FF: opacity:0.6;
FF: -moz-opacity:0.10;
最好两个都写，并将opacity属性放在下面
2、min-height最小高度的实现（兼容IE6、IE7、FF）
作用是：当容器的内容较少时，能保持一个最小的高度，以免破坏了布局或UI设计效果。而当容器内的内容增加的时候，容器能够自动的伸展以适应内容的变化。
1 #id {
2 background:#ccc;
3 min-height:100px;
4 height:auto !important;
5 height:100px;
6 overflow:visible;
7 }
3、跨浏览器的CSS透明度
1 .transparent {
2 opacity: 0.7;
3 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
4 filter: alpha(opacity=70);
5 -moz-opacity: 0.7;
6 -khtml-opacity: 0.7;
7 }
8
4、文字阴影、box阴影（CSS3）
1 .text { text-shadow: 1px 1px 1px #666; filter: Shadow(Color=#666666, Direction=135, Strength=5); }
2 .box { box-shadow: 5px 5px 5px #666; -moz-box-shadow: 5px 5px 5px #666; -webkit-box-shadow: 5px 5px 5px #666; }
5、iframe元素內嵌頁面如何去掉继承的html及body背景色/背景图片
iframe元素的功能是在一个文档里内嵌一个文档，创建一个浮动的帧。内嵌文档时一个完整的页面，有HTML,BODY等属性。这样遇到了一个问题，如果样式表中对BODY定义过背景色/背景图片，那么内嵌文档将全部继承过来。所以如何去掉背景色和背景图片：
【1】去掉背景色：filter:Chroma(Color=white);
举例：<iframe width="100%" height="400" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" leftmargin="0" topmargin="0" style="filter:Chroma(Color=white);" ></iframe>
【2】去掉背景图片：
举例：<iframe width="100%" height="400" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" leftmargin="0" topmargin="0" style="filter:Chroma(Color=white);" allowTransparency="true" ></iframe>
注意：内嵌页面同时也要增加BODY属性：
<body bgcolor="transparent" style='background:transparent'>
6、怎么样才能让层显示在FLASH之上呢？
解决的办法是给FLASH设置透明:
1 <a href="http://www.chinaz.com/">:</a>
2 <pre lang="html" line="1">
3 <param name="wmode" value="transparent" />
7、怎样使一个div层居中于浏览器中？
1 <style type="text/css">
2 <!--
3 div {
4 position:absolute;
5 top:50%;
6 left:50%;
7 margin:-100px 0 0 -100px;
8 width:200px;
9 height:200px;
10 border:1px solid red;
11 }
12 -->
13 </style>
8、文字与表单对齐方法？
设置表单元素第一字体为Tahoma(Verdana系列也可),并设置vertical-align:middle.建设大家把这个约定写入CSS RESET中,能减小很多麻烦:
1 body,button,input,select,textarea{font:12px/1.5 tahoma,arial,sans-serif; vertical-align:middle}
9、optgroup标签的用法？
optgroup标签,鲜为人知,它对提升选择表单用户体验很有帮助。就是可以在有很多选项时,对这些选项分组：例子：
1 <select id="selectId">
2 <optgroup label="GROUP ONE">
3 <option value="1">one select</option>
4 <option value="2">two select</option>
5 </optgroup>
6 <optgroup label="GROUP TWO">
7 <option value="3">three select</option>
8 <option value="4">four select</option>
9 </optgroup>
10 </select>
11
效果图：
10、文字与图片垂直居中对齐方法？
为图片与文字的共同父元素所有的后代元素定义*{vertical-align:middle};
例如:
<p>我要的坚强<img src="i/image.gif" /></p>
只需定义p*{vertical-align:middle}即可使文字与图片同行垂直居中。
11、网页设计中的默认字体
1 font: 12px/1.5 Tahoma, Helvetica, Arial, sans-serif;
说明：line-height采用1.5, 也就是18px. 这是淘宝视觉规范中定义的行高，对于12px字体，这个行高看起来很舒服。font-family默认采用Tahoma. Tahoma是英文Windows操作系统的默认字体，这个字体比较均衡，显示中英文混排很不错，是经久耐看的一款字体。
12、浏览器兼容——常用的css hack
（1）.title{ height:200px;*height:200px;_height:200px; }
（2）.title{ height:200px;*height:200px !important;*height:200px; }
（3）.title{ height:200px; }
*html.title{ height:200px;}
*+html.title{ height:200px;}
