兼容性及经验汇总

  1. 浮动时，父级元素无法撑开+

    解决方案： 全局增加样式 

    .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}.clearfix{zoom:1}
    父级元素调用clearfix

  2. IE6 div浮动时，margin双倍边距bug+

    解决方案：为浮动的div加上display:inline;

  3. IE6及早期版本 无法直接定义较小高度的容器+

    原因：就算容器里什么都没有也会有行高

    解决方案：font-size:0;line-height:0;overflow:hidden;

  4. IE6 span a等行内元素空格或者回车出现3像素空隙+

    有空隙 有空隙 有空隙

    没有空隙没有空隙没有空隙

    解决方案：1、写成一行。将父级标签font-size初始化为0，然后重新设置元素的字体大小。

  5. IE7及以下版本 两个以上li浮动，li之间出现空白间隙bug+

    解决方案：li{vertical-align:top}

  6. IE6 li内，定义display:block的内联元素底部产生空白+

    解决方案： 给li内的内联元素，加上zoom:1

  7. IE6 模拟min-height效果+

    解决方案：min-height:100px;_height:100px;

  8. IE6 文本溢出，多出一个文字BUG+

    原因：浮动，注释，宽高定义

    解决方案：删除出现bug的元素之间的注释

  9. 使用滤镜PNG图片透明后，容器内链接失效+

    原因：浮动，注释，宽高定义

    解决方案：为容器里面的a加个_position:relative样式

  10. IE6 无法识别伪对象:first-letter/:first-line+

    解决方案： 选择符与“{”之间增加空格，或者换行。

  11. IE6 忽略同一条样式体内的!important规则+

    解决方案： 将该样式拆分为2条，!important单独书写

  12. IE7及以下版本 元素设置了position:relative;相对定位，父级元素overflow:auto|hidden失效+

    解决方案： 给父级元素增加position:relative

  13. img图片下方出现几个像素间隙+

    解决方案： img{display:block}或者img{vertical-align:top} 在或者 img{font-size:0}

  14. 如何让文本垂直对齐文本输入框？+

    解决方案： input{vertical-align:middle}

  15. 如何让单行文本在容器内垂直居中？+

    解决方案： 设置文本的行高等于容器的高度。举例：height:25px;line-height:25px;

  16. IE下 如何设置滚动条的颜色+

    解决方案：定义html标签

    html{
    scrollbar-3dlight-color:#999;
    scrollbar-darkshadow-color:#999;
    scrollbar-highlight-color:#fff;
    scrollbar-shadow-color:#eee;
    scrollbar-arrow-color:#000;
    scrollbar-face-color:#ddd;
    scrollbar-track-color:#eee;
    scrollbar-base-color:#ddd}

  17. 强制文本溢出一行显示+

    解决方案： 设置容器的宽度和white-space:nowrap

  18. 如何使文本溢出边界显示为省略号+

    解决方案： 设置容器宽度，设置文本一行显示，溢出截断并显示省略号。例子：

    .test {width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

  19. IE下 iframe背景透明+

    解决方案： 设置iframe元素的标签属性allowtransparency="allowtransparency"然后设置iframe内部页面的body背景色为transparent。引发的问题：设置透明后的iframe将不能遮住select

  20. 各个浏览器 opacity透明问题+

    .test {filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);-moz-opacity: 0.5;opacity: 0.5}

  21. IE6下 png背景透明+

    解决方案： 调用DD_belatedPNG_0.0.8a-min.js插件

    1. <!--[if IE 6]>
    2. <script type="text/javascript" src="//lib.h-ui.net/DD_belatedPNG_0.0.8a-min.js" ></script>
    3. <script>DD_belatedPNG.fix('.pngfix,.icon');</script>
    4. <![endif]-->

  22. 让连续的长字符串自动换行+

    解决方案： word-wrap:break-word;

  23. 去掉超链接的虚线框+

    解决方案： 

    a {outline:none;blr:expression(this.onFocus=this.blur())}

  24. 网页水平居中+

    解决方案： 

    body{text-align:center} .wp{width:980px;margin:0 auto;text-align:left}

  25. 如何让table边框1个像素细+

    解决方案： 

    table{border-collapse:collapse}
table th,table td{border:1px solid #ddd}

  26. 网页去色，让网站显示灰色+

    解决方案： 

    *{filter:gray; color:gray}
html { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)}

  27. 两个相邻块级元素，都设置了margin，间距只有最大一个，间距不会相加。+

    原因： 这种现象叫：“外边距合并”，两间距相邻取大。 此现象也出现在父子元素。

    注意： 浮动元素和绝对定位元素，不会和相邻的元素产生外边距合并；内联块级元素间不会产生外边距合并；根元素间不会产生外边距合并（如html与body间）；设置了属性overflow且值不为visible的块级元素不会与它的子元素发生外边距合并。