整理的一些常用的CSS HACK

 ie8以下兼容透明都和支持CSS圆角，这两个都要在服务器上才看到效果，可以本地搭建一个服务器如IIS

-pie-background: rgba(255, 255, 255, 0.10);/*IE6-8*/透明度兼容

background: rgba(255, 255, 255, 0.10);

最好是每个网站都加上

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="renderer" content="webkit">

隐藏背景上的字体

所以还是只能用block加text-indent来“偏移”模拟隐藏了

display:block;

font-size:0;

line-height:0;

text-indent:-9999px;

经测试 ie6.0 、 7.0 、firefox 3.010 通过

嵌套inline-block下padding元素重叠

<span style="font-weight: normal;"><ul>

<li><a>1</a></li>

<li><a>2</a></li>

<li><a>3</a></li>

</ul></span>

<span style="font-weight: normal;">ul li{

display: inline-block;

}

ul li a{

display: inline-block;

padding: 10px 15px;

}</span>

按理来说a标签之间的距离应该是30px，但在IE8中出现了重叠，只有15px。这里和这里也提到了同样的问题。我的解决方法是使用float: left替代display: inline-block实现水平布局。



height: 100%下jQuery的slideUp/slideDown出错



见jQuery slideToggle problem when using height %。



当设置如下属性时：



html, body{height: 100%;}

就会出错。



目前的解决方法是在需要slide的元素加上height: auto !important;。

border: 1px solid #80a5c3;

border-radius: 8px;

behavior: url(../Images/PIE.htc);}//圆角兼容

<!-- 指定以最新的IE版本模式来显示网页 -->

<!-- 针对360浏览器的内核调用,强制调用极速模式 -->

1：.xxx{line-height:0;font-size:0;overflow:hidden}经测试
ie6.0 、 7.0 、8.0、firefox 3.010 通过:

2：使用text-indent:-9999px;

可是他有一个局限性 他只适用于块级元素block

3：最方便的是加个span，然后display:none，而且这样不会出bug。

遗憾的是，多了个标签，循环中使用的话，html又多了一堆字节，单个按钮推荐这样使用。

而针对input value的隐藏这个方式就有些吃力了