zoukankan      html  css  js  c++  java
  • inline-block和text-indent在IE6,IE7下同时使用的兼容问题解决方法

    在实际应用中,考虑到seo,很多button,icon都要用到inline-block和text-indent来处理,例如:

    <a href=”#”>Button</a>

    当我们把css写成这样

    .btn{display:inline-block; 100px; height:23px; text-indent:-9999px;background-image:url(img.jpg);}

    在标准浏览器下是没问题的,但是在IE6和7下会触发A标签消失的bug。

    解决方法1:

    display:inline-block;

    改为

    display:block;

    然后再做布局处理。

    解决方法2:

    text-indent:-9999px;

    改为

    font-size:0; line-height:0;

    或者各种可以隐藏掉内容元素的方法。

    解决方法3:

    &nbsp;<a href=”#”>Button</a>

    在按钮前面增加任何元素,都可以让消失的按钮重新出现。

    解决方法4: 给元素加 position:absolute;

    PS:inline或inline-block元素设置text-indent在IE6/IE7中显示不正常的bug致使text-indent会传递到父及元素,也就出现了上文中的结果。

    造成这种情况的原因应该是IE6/IE7并没有真正实现inline-block,而是通过设置display:inline-block触发了IE的layout,从而使内联元素拥有了inline-block属性的表症

  • 相关阅读:
    vue 初始化项目模板报错
    092117-6265-01.dmp 蓝屏日志文件
    电信流氓注入JS
    DISM
    node.js
    Adobe ZXPInstaller 报错 Installation failed because of a file operation error.
    Microsoft Edge 针对 Web 开发人员更新日志
    What's new in Safari 11.0
    CSS Filter
    accept-language
  • 原文地址:https://www.cnblogs.com/Dong-Ge/p/6221256.html
Copyright © 2011-2022 走看看