曾经让人迷糊的WEB兼容问题回顾
以下所说得都是曾经学CSS时让我犯难的兼容性问题，现在整理一部分温故知新。好记性不如烂笔头，多写写也没坏处。
1. IE6的双倍边距BUG
浮动后本来外边距10px,但IE解释为20px,解决办法是加上：
更详细的解释请见《IE6双倍边距——IE布局BUG集锦》
2. IE6下为什么图片下方有空隙产生
设置img 为display:block 或者设置vertical-align 属性为vertical-align:top | bottom |middle |text-bottom
都可以解决。
更详细的解释请见《图片下边的多余空隙——IE布局BUG集锦》
3. 让一个层垂直居中于浏览器
使用百分比绝对定位,与外补丁负值的方法,负值的大小为其自身宽度高度的一半
2 position:absolute;
3 top:50%;
4 left:50%;
5 margin:-100px 0 0 -100px;
6 width:200px;
7 height:200px;
8 border:1px solid red;
9 }
4. Web标准中IE如何设置滚动条颜色
IE中是将滚动条样式写在body元素上，而WEB标准中则是写在html上：
2 scrollbar-face-color:#f6f6f6;
3 scrollbar-highlight-color:#fff;
4 scrollbar-shadow-color:#eeeeee;
5 scrollbar-3dlight-color:#eeeeee;
6 scrollbar-arrow-color:#000;
7 scrollbar-track-color:#fff;
8 scrollbar-darkshadow-color:#fff;
9 }
5. 如何使flash动画不盖住层
a. 关键属性:
2 <embed wmode="opaque"></embed>
b. 基于Adobe代码:
6. 未知高度图片垂直居中
解决这个问题的前提条件是该图片所在父级层必须是高度确定的，同时所谓的图片未知高度也应该是以父级层的高度为上限，即 0<图片高度<父级层高度；注意事项是，该层也不要有太复杂的html结构，不然也还是没法取得完美效果。我个人觉得解决这个问题纯粹是挑战WEB标准的技巧性手法而已，实际开发中应是优化整体的html结构代码规避这类问题是最好了。
2 .box {
3 /*非IE的主流浏览器识别的垂直居中的方法*/
4 display: table-cell;
5 vertical-align:middle;
6
7 /*设置水平居中*/
8 text-align:center;
9
10 /* 针对IE的Hack */
11 *display: block;
12 *font-size: 175px;/*约为高度的0.873，200*0.873 约为175*/
13 *font-family:Arial;/*防止非utf-8引起的hack失效问题，如gbk编码*/
14
15 width:300px;
16 height:200px;
17 border: 1px solid #eee;
18 overflow:hidden;
19
20 }
21 .box img {
22 /*设置图片垂直居中*/
23 vertical-align:middle;
24 }
25 </style>
7. 在不使用 border 样式的情况下，画出一条高为1px的横线
8. 如何对齐文本和文本输入框
给input元素定义vertical-align:middle
9. 标准浏览器中的一个容器，在固定其高度的同时，又要在高度需要被撑开的时候撑开
10. float闭合通用解决方案
2 content: ".";
3 display: block;
4 clear: both;
5 visibility: hidden;
6 line-height: 0;
7 height: 0;
8 }
9 .clearfix {
10 display: block;
11 }
12 html[xmlns] .clearfix {
13 display: block;
14 }
15 * html .clearfix {
16 height: 1%;
17 }
