zoukankan      html  css  js  c++  java
  • position:relative与IE6的最新恩怨

    偶然,真的是偶然,非常之偶然,发现了position:relative与IE6真的有1腿!

    直接看例子:

    一般我们经常使用sprite背景图来定义某条文字前的ICON图标,如下图,错误提示图标:

    一般我们这么设置:

    <em class="tip errormsg">请输入2-4个中文!</em>

    .tip{background:url(../images/icon.png) no-repeat -99999px 0;}

    .errormsg{background-position:0 -30px;} 比如那出错的图标在此坐标上。

    这种情况下,所有浏览器都是正常的,图标和文字排列很整齐。

    但有时候我们需要把错误提示整体往下挪1像素,让提示与左边输入框平行,看的整齐点:

    .errormsg{background-position:0 -30px; position:relative; top:1px;} 

    结果发现了什么,除了IE6,其他是正常向下挪了1像素。

    但杯具的是IE6,挪是挪了,但它的错误图标没了,或位移了,和文字排的不整齐了,见图:

    我试着把position:relative;去掉,它又回复正常。

    真没想到在IE6下,position:relative;与背景图的background-position坐标也有牵扯了。

    还有种解决办法,再加上浮动就会显示正常了:

    .homepage{background-position:0 -24px; position:relative; top:1px; float:left;} 

    不知道大家有没碰到这种情况,所以说,IE6的陷进还是蛮多的啊。

  • 相关阅读:
    SQL盲注 加速方法
    后渗透(七)关闭防火墙和杀毒软件并开启远程桌面
    后渗透(五)PassingTheHash
    瀏覽器兼容性解決方法
    web頁面優化以及SEO
    DOM中的事件傳播機制
    Get與Post的區別--總結隨筆
    微信飞机大战
    python教程(三)·自定义函数
    python教程(三)·函数与模块
  • 原文地址:https://www.cnblogs.com/pannysp/p/2693930.html
Copyright © 2011-2022 走看看