• 前端零碎问题(一)css hack


    hack技术主要针对IE浏览器,尤其是低版本的IE,说实话,微软都觉得自己的低版本浏览器渣渣了,我们还要兼容,感觉到了深深的恶意,

    1): png-24 图片 IE6 不支持,使用 png-8 的图片来解决,或者 做两张图片,分别使用

    2): 浮动元素 margin 值加倍,给元素增加 display: inline 或 display: inline-block 属性。

    3): 图片有个 3px margin,增加属性 margin: -3px;

    4): 条件注释:

    <!--[if lte IE 6]> 这段文字仅显示在 IE6及IE6以下版本。 <![endif]-->
    <!--[if gte IE 6]> 这段文字仅显示在 IE6及IE6以上版本。 <![endif]-->
    <!--[if gt IE 6]> 这段文字仅显示在 IE6以上版本(不包含IE6)。 <![endif]-->
    <!--[if IE 5.5]> 这段文字仅显示在 IE5.5。 <![endif]-->
    <!--在 IE6及IE6以下版本中加载css-->
    <!--[if lte IE 6]> <link type="text/css" rel="stylesheet" href="css/ie6.css" mce_href="css/ie6.css" /><![endif]-->
    

    缺点是在IE浏览器下可能会增加额外的HTTP请求数。

    5): 通过选择器区分

    /* 1、区别IE和其他浏览器 *,IE 都认识,其他浏览器不认识 */
    .demo{
        *background: red;
        background: blue;
    }
    /* IE 浏览器里面是红色,其他浏览器是蓝色的 */
    /* 2、区别IE6,IE6 不能识别 !important */
    /* 3、区别 IE6,IE6 可识别_ */
    .demo{
        _color: red;
        color: green;        
    }    
    /* IE6 颜色为红色,其他浏览器为绿色 */
    

    6): IE 低版本下的圆角,用图片来写,或者优雅降级(IE 低版本里面用直角)

    7): IE6背景闪烁

    如果你给链接、按钮用CSS sprites作为背景,你可能会发现在IE6下会有背景图闪烁的现象。造成这个的原因是由于IE6没有将背景图缓存,每次触发hover的时候都会重新加载,可以用JavaScript设置IE6缓存这些图片:document.execCommand("BackgroundImageCache",false,true);

    8): 最大、最小高度、宽度,利用js来处理,或尽量避免使用最大、最小宽高

    9): 100% 高度,IE6 认为是父级的100%,因此要给 html、body等分别设置宽度为100%

    10): 清除浮动

    如果你想用div(或其他容器)包裹一个浮动的元素,你会发现必须给div(容器)定义明确的height、width、overflow之中一个属性(除了auto值)才能将浮动元素严实地包裹。

    .container {border:1px solid #333; overflow:auto; height:100%;}
    .floated1 {float:left; height:300px; 200px; background:#00F;}
    .floated2 {float:right; height:400px; 200px; background:#F0F;}
  • 相关阅读:
    ffmpeg
    HDU 1031 Design T-Shirt
    HDU 1029 Ignatius and the Princess IV
    HDU 1022 Train Problem I
    HDU 1017 A Mathematical Curiosity
    HDU 1015 Safecracker
    HDU 1002 A + B Problem II
    HDU 1070 Milk
    高精度算法(一)
    codeblocks 使用心得
  • 原文地址:https://www.cnblogs.com/gutianer/p/8022693.html
Copyright © 2020-2023  润新知