兼容性及经验汇总

  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="http://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的块级元素不会与它的子元素发生外边距合并。