自我总结CSS中的陷阱（长期更新）

2019年9月7日 131次阅读 来源: Hockor

低版本IE bug

万恶的IE6/7

IE6 position:fixed不支持：通过css expression解决，或者是_position:absolute。

* html, 
* html body {
          background-image: url(about:blank);background-attachment: fixed;
}

* html #menu {
          position: absolute;bottom: auto;top: expression(100+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px');
}

IE6 png24 : 通过DD_belatedPNG.js解决。

IE678不支持css3动画属性: 通过http://gucong3000.github.io/transform/解决；

IE6下双倍边距问题： 通过*display:inline解决。

IE6下非a标签的:hover伪类无效：通过JS操作解决

IE6下用border属性写三角形
如果用

          border-width:10px;
          border-color: transparent  transparent transparent transparent;
          border-style:solid;

这样写的话会出现黑边，
解决方案是使用

doshed：border-style:dashed dashed solid dashed ;

IE6下绝对定位的bug

相对于相对定位的祖先元素对框进行绝对定位，这在大多数现代浏览器中实现得很好。但是，在windows上的IE5.5和IE6中有一个BUG，如果试图相对于相对定位的框的右边或底部设置绝对定位的框的位置，那么需要确保相对定位的框已经设置了尺寸。如果没有，那么IE会相对于画布定位这个框。简单的解决方案时为相对定位的框设置宽度和高度。

怎样让ie浏览器支持最小高度

IE不识别min-这个定义，实际上它把正常的width和height当作有min的情况来使用的。

min-height:200px;
height:auto;
_height:200px;

注意 height一定要在_height之前。

无法定义1px左右高度的容器

IE6下这个问题是因为默认的行高造成的,解决的方法也有很多,
例如:overflow:hidden | zoom:1 | line-height:1px

IE6下为什么图片下有空隙产生？

解决方法是可以改变html的排版，或者设置img为display:block
或者设置vertical-align属性为vertical-align:top|bottom|middle|text-bottom;

IE7以下不支持display:inline-block

解决方案：
第一种：专门为IE7写Hack

 display:inline-block;
 *display:inline;
 *zoom:1;

特别是 ZOOM:1 这个必须的(触发haslayout)

第二种：

.selector { display: inline-block }
.selector { *display: inline }

注意这两个 display要先后放在两个CSS声明中才有效果，这是IE的一个经典bug，如果先定义了display:inline-block，然后再将 display设回inline或block，layout不会消失。不能写进一个声明中。

另外：input、select、button、textarea的默认display皆为inline-block,所以    在布局时应加以注意...

其他bug

火狐下链接视频显示不出来

原因：z-index导致，使用如下嵌入方式。并用wmode=”Transparent”

<embed wmode="Transparent" src="f" allowFullScreen="true" quality="high" type="application/x-shockwave-flash"></embed >

IE9一下不支持input:disabled的样式修改

IE7下直接使用jquery blur无效，通过settimeout设置blur()即可

    原文作者：Hockor
    原文地址: https://segmentfault.com/a/1190000002622495
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞