1：空的a标签在IE7/8下不能点击（2015-05-22）
html代码：
<ul class='oUl'>
<li><a href="#"> </a></li>
<li><a href="#"> </a></li>
<li><a href="#"> </a></li>
</ul>
CSS样式：.oUl li a{width:60px;height:60px;display:block;cursor:pointer;}
问题描述：在ie8和ie7下，鼠标悬浮在<a>上时没有任何反应，也没有<a>的手型图案，更不能点击。
解决方案：给a标签随便添加背景色或者背景图片，然后将a标签的透明度设置为0，在IE中使用滤镜的方法让背景色不显示！
.oUl li a{width:60px;height:60px;display:block;cursor:pointer;background:#fff; opacity:0;filter:alpha(opacity=0);}
[转自]：http://www.csshello.com/jcdivcss/284.html
2: IE7下遇到的z-index问题与解决方法(2015-06-07)
写CSS的时候，在position的情况下，明明把z-index设置很高的数值，比方说z-index:1000000;在IE7下运行的时候往往不是我们想要的效果，不管设置z-index多高的数值仍然被层遮挡住了，这是IE7渲染DOM的问题，我们把父层的容器用position定位的时候（position:relative;），子层的z-index不管设置多高数值都会被重置。
既然问题找到了，我们也就知道解决的方法了，只要把父层加上z-index值就OK了，z-index一定要和position同时使用，否则无效。
最后我发现，在引用的CSS中写z-index属性有时候会不起作用，要写到标签里……
[转自]：http://www.toyean.com/post/211.html
3：FireFox5 下selected = selected失效(2015-07-23)
问题描述：使用js动态改变select的selected属性时，发现不起作用。可能的原因是FF5出于性能考虑，将一开始加载的dom元素的一些属性缓存起来了，而当使用F5刷新的时候，FF依然使用缓存中的属性，而不使用新的属性。 只有使用CTRL+F5强制刷新时，才能渲染新的属性。
解决方案：在select标签中加autocomplete ="off" 就行了
[转自]：http://www.jb51.net/css/141554.html
4：Reset.css(2015-12-23)
;;}
ul,ol{list-style:none;}
body{font-size:12px;font-family:"Microsoft yahei";}
a{text-decoration:none;}
5、IE7不支持 box-sizing: border-box(2015-12-24)
下面的demo：对 .box元素添加样式，需引入boxsizing.htc这个文件，兼容到IE7+，Chrome，Firefox。
.box{width:100%;margin:30px auto;padding:20px;border:1px solid #ccc;overflow:hidden;box-sizing:border-box;*behavior:url(boxsizing.htc);}
[参考]：https://github.com/Schepp/box-sizing-polyfill
6、Reset.css(2015-12-25)
html,body,div,span,iframe,h1,h2,h3,h4,h5,h6,p,
a,em,img,strong,sub,sup,i,dl,dt,dd,ol,ul,li,fieldset,
form,label,table,caption,tbody,tfoot,thead,tr,th,td {
;
;
}
body {
font-family: "Microsoft yahei", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.42857143;
background-color: #fff;
}
ol,ul {
list-style: none;
}
table {
border-collapse: collapse;
;
}
caption,th,td {
text-align: left;
font-weight: normal;
vertical-align: middle;
}
a{
text-decoration:none;
}
a img {
border: none;
}
article,aside,footer,header,menu,nav,section,summary {
display: block;
}
7、设置z-index属性无效(2016-02-03)
在CSS中，只能通过代码改变层级，这个属性就是z-index，要让z-index起作用有个小小前提，就是元素的position属性要是relative，absolute或是fixed。
1：第一种情况（z-index无论设置多高都不起作用情况）：
这种情况发生的条件有三个：
(1)、父标签 position属性为relative；
(2)、问题标签无position属性（不包括static）；
(3)、问题标签含有浮动(float)属性。
解决办法有三个（任一即可）：
(1)、position:relative改为position:absolute；
(2)、浮动元素添加position属性（如relative，absolute等）；
(3)、去除浮动。
2：第二种情况：IE6下，层级的表现有时候不是看子标签的z-index多高，而要看整个DOM tree（节点树）的第一个relative属性的父标签的层级。
8、让IE7/IE8支持CSS3 background-size属性
.box{
background:url(bg.jpg) no-repeat center center;
background-size:100% 100%;
-ms-behavior:url(backgroundsize.min.htc);
behavior:url(backgroundsize.min.htc);
}
由于 background-size 是 CSS3 新增的属性，所以 IE 低版本自然就不支持了，但是老外写了一个 htc 文件，名叫 background-size polyfill，使用该文件能够让 IE7、IE8 支持 background-size 属性。其原理是创建一个 img 元素插入到容器中，并重新计算宽度、高度、left、top 等值，模拟 background-size 的效果。
[参考]：http://www.dowebok.com/139.html
9、img与div(block类型元素)下边界有距离(缝隙)的解决方法
<div style="padding:0;margin:0;border:1px solid orange;">
<img src="demo.png" />
</div>
解决方案：
方法一：给图片img标签display:block
方法二：定义图片img标签vertical-align:bottom，vertical-align:middle，vertical-align:top。
img{vertical-align:bottom;}