专栏首页前端杂货铺IE6下的png透明图片的背景定位

IE6下的png透明图片的背景定位

在IE6下PNG透明图片做背景,无法使用background-position进行定位。但是可以使用margin和绝对定位来进行。

另外,由于IE6下的 :hover 只对<a>支持,对其他元素都不起作用,所以需要对IE6单独打补丁。可以使用微软提供的

csshover.htc文件进行修复。

 <ul class="nav">
        <li>
            <a href="void 0" class="a"><img class="i1" src="img/png_btn.png"></a>
        </li>
        <li>
            <a href="void 0" class="a"><img class="i2" src="img/png_btn.png"></a>
        </li>
        <li>
            <a href="void 0" class="a"><img class="i3" src="img/png_btn.png"></a>
        </li>
        <li>
            <a href="void 0" class="a"><img class="i4" src="img/png_btn.png"></a>
        </li>
  </ul>

        .nav{padding: 0;margin: 0;list-style: none;width:40px;}
        .nav li{width: 160px;height: 40px; overflow: hidden;}
        .nav li a{text-decoration: none;}
        .i1{margin: -2px 0 0 -2px;}
        .a:hover .i1{margin: -42px 0 0 -2px;}
        .i2{margin: -2px 0 0 -162px;}
        .a:hover .i2{margin: -42px 0 0 -162px;}
        .i3{margin: -2px 0 0 -322px;}
        .a:hover .i3{margin: -42px 0 0 -322px;}
        .i4{margin: -2px 0 0 -482px;}
        .a:hover .i4{margin:  -42px 0 0 -482px;}

  IE6下,在不通过修改html代码的情况下,也可通过clip属性来进行模拟。

  而对于htc文件的引入,可以在html标签中加入这一句:

  body { behavior:url("csshover.htc"); }

  即可是div,p等元素支持 :hover。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 3d效果的图片轮播

    CSS3的3d变换 CSS3给我们提供了一个新的功能,那就是3d变换。3d变换和2d变换的基本API函数类似,只不过多了些在Z轴上的操作,不难使用。     ...

    欲休
  • CSS3实现圆形进度条

    介绍   闲来无事,去了CSS3Plus网站逛了逛,发现了一个很有意思的实现--css3实现进度条。粗略看了下代码,发现原理其实很简单,不难理解。 现在在此讲述...

    欲休
  • 清除inline-block元素之间的空白

    一个元素如果被设置为display:inline-block,那么这个元素将表现为行内块的性质。被设为行内块的元素 对内(子元素)表现为块级框,具体为可以设置高...

    欲休
  • 个人信息页面网页

    王凡汎
  • 基于JQuery实现的图片拖拽缩放特效

    越陌度阡
  • CSS3

    http://caniuse.com/ 1、私有前缀及其用法 .round{ -khtml-border-radius: 10px; / Konqueror /...

    py3study
  • 脱离切图仔,教你智能生成前端代码 [必学]

    Peter谭金杰
  • HTML,login文本框·

    Wyc
  • Openlayers3中SVG图加载

    鉴于SVG的优势,在图层展示的时候,会想到SVG的方式,但是OL3里面只支持ImageStatic的方式加载,也就是只能加载栅格图片,为此,本文实现Openla...

    lzugis
  • vue input输入框联想

    以下是示例,样式可以自己修改。最后是效果图,其实也挺简单的,主要是用了watch监控input输入值的变化,如果数据是请后端请求可以,先请求数据。 <templ...

    庞小明

扫码关注云+社区

领取腾讯云代金券