css&html的问题积累
1、图片垂直居中的使用技巧
<html>
<head>
</head>
<body>
<style>
.box {
*display: block;
*font-size: 175px;/*约为高度的0.873，200*0.873 约为175*/
*font-family:Arial;/*防止非utf-8引起的hack失效问题，如gbk编码*/
width:200px;
height:200px;
display:table-cell;
vertical-align:middle;
text-align:center;
border: 1px solid #eee;
}
.box img {vertical-align:middle}
</style>
<div class="box"><img src="http://pics.taobao.com/bao/album/promotion/taoscars_180x95_071112_sr.jpg"/></div>
</body>
</html>
display:table-cell;vertical-align:middle; 对非ie6浏览器可以使用line-height:200px来取代。(注意dtd类型的定义，如果使用Transitional类型line-height将不起作用)
原文：http://www.planabc.net/2008/05/26/img_vertical_center_solution/
参考：http://www.student.oulu.fi/~laurirai/www/css/middle/
2、display:inline-block的兼容问题
引用:将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。但对于这个属性不是所有浏览器都识别。
支持的浏览器有：Opera、Safari、Firefox3.0
【情况为内联元素】如a,span,em...
在IE中对内联元素使用display:inline-block，IE是不识别的，但使用display:inline-block在IE下会触发layout，从而使内联元素拥有了display:inline-block
【情况为块级元素】如div,li,p...
直接让块元素设置为内联对象呈递（设置属性display:inline），然后触发块元素的layout（如：zoom:1等）。代码如下：
div {display:inline-block;*display:inline;zoom:1;}
3、selecte,input等value被浏览器缓存解决方法
使用html属性autocomplete="off"解决！,select需要在form上添加此属性。
4、word-wrap:break-word
【ie中的解决办法】table添加属性：word-break:break-all
【firefox中的解决办法】table添加属性：table-layout:fixed
5、ie6下right:0px/bottom:0px的1像素bug
【原因】position:relitave;的容器的width为基数；
【解决方法】宽度改为偶数
6、ie6/ie7下background-position:100% 100%的解析bug
【原因】http://www.brunildo.org/test/BackgroundBorderLayout.html
【解决方法】增加hack，zoom：1
7、ie7/ie6 box解析height = border + height 其他height = height - border
8、ie6 不支持class连写，如.mt-search-type.hover{}
【ie6解读】ie6将忽略前一个样式，解读为.hover{}
