9.10

Posted 2021-01-05 jihongtao

#CSS Hack

1.条件注释Hack

    <!--[if IE]>

        <p>IE浏览器可以识别</p>

    <![endif]-->

    <!--if lte IE 8>

        <p>IE8-浏览器可以识别</p>

    <![endif]-->

    <!--[if gt TE 8]>

        <p>大于TE8浏览器可以识别</p>

    <![endif]-->

    <!--[if !IE 8]>

        <p>非TE8浏览器可以识别</p>

    <![endif]-->

2.  属性Hack

    _background:red;     /* TE 6 */

    *background:red;     /* TE 6,7 */

    background:red9;    /* TE6+ */

    background:red;    /* TE8,Opera */  

3.  !important（具有最高权值，优先级大于行内样式）

    div{

        color:blue!important;

    }

    如果写了多个important冲突了，则还会按照原始的优先级去设置

4.  常见兼容问题

    a.IE6及更早浏览器浮动时产生双倍边距

        #test{float:left;_display:inline;}

    b.在IE7中，块元素转行内块元素失效

        div{

            display: inline-block;

            *display: inline;

            *zoom: 1;

        }

5.  鼠标样式

    cursor: default;     /* 默认箭头 */

    cursor: pointer;     /* 手型 */

    cursor: wait;        /* 等待 */

    cursor: text;        /* 文本状态 */

cursor: move;        /* 移动（拖拽） */

6.  iframe(内嵌框架-在当前页面显示另一个页面的内容)

<iframe src="./xx.html" width="" height=""></iframe>

7.  如何隐藏一个元素，请你写出四种办法

    display:none;

    visibility:hidden;

    <div hidden></div>

    opacity:0；

8.  display:none与visibility:hidden的区别

    前者不占页面空间了，而后者依然占空间