整理的一些常用的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的隐藏这个方式就有些吃力了



posted @ 2014-10-20 14:08  rose_sun  阅读(160)  评论(0编辑  收藏  举报