整理的一些常用的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);}//圆角兼容


ie11 设置scrollTop无效

改用:$(document).scrollTop()


你可能感兴趣的:(opacity,css,webkit,CSS圆角,hack大全,兼容浏览不一致的问题)