inline-block和text-indent在IE6,IE7下同时使用的兼容问题解决方法
在实际应用中,考虑到seo,很多button,icon都要用到inline-block和text-indent来处理,例如:
<a href="#">Button</a>
当我们把css写成这样
.btn{display:inline-block; width: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:
<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属性的表症。
inline-block和text-indent在IE6,IE7下同时使用的兼容问题解决方法的更多相关文章
- IE6/IE7下margin-bottom失效兼容解决办法及双倍边距问题
(从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-04-08) 一.IE6/IE7下margin-bottom失效兼容解决办法 1.用padding-bottom代替:2.在 ...
- ie6,ie7,ie8 css bug兼容解决方法
IE浏览器以不支持大量的css 属性出名,同时也因其支持的css属性中存在大量bug. 这里收集了好多的bug以及其解决的办法,都在这个文章里面记录下来了!希望以后解决类似问题的时候能够快速解决,也希 ...
- IE6,IE7下滚动条没有生效解决方法
需要加个相对定位 position:relative;
- ie6,ie7,ie8 css bug兼容解决记录
ie6,ie7,ie8 css bug兼容解决记录 转载自:ie6,ie7,ie8 css bug兼容解决记录 - 前端开发 断断续续的在开发过程中收集了好多的bug以及其解决的办法,都在这个文章里面 ...
- IE6/IE7下:inline-block解决方案
IE6/IE7下对display:inline-block的支持性不好. 1.inline元素的display属性设置为inline-block时,所有的浏览器都支持: 2.block元素的displ ...
- IE6/IE7下:inline-block不兼容的问题
IE6/IE7下对display:inline-block的支持性不好. 1.inline元素的display属性设置为inline-block时,所有的浏览器都支持: 2.block元素 ...
- 空a标签 a标签空的情况下 IE6 IE7下点击无效
最近做了好多网站专题页面,因为专题页面图片较多,个别banner上有1个到多个按钮,一种是用“图解img标签的usemap”的方法做链接,(图解img标签的usemap使用方法)[传送门] 另一种用则 ...
- ie6,ie7下设置overflow:auto下滚动条不起作用
今天遇到一个比较特殊的情况:ie6,ie7下设置overflow:auto下滚动条出来了但是滚动条不起任何作用,但在火狐,ie8,ie9,谷歌等浏览器下正常显示,解决方案:只需要加一个position ...
- 一句white-space:nowrap解决IE6,IE7下浮动元素不自动换行
一句white-space:nowrap解决IE6,IE7下浮动元素不自动换行
随机推荐
- Opencv图像与矩阵的操作
#include "stdafx.h" #include <cv.h> #include <cxcore.h> #include <highgui.h ...
- java中的静态static关键字
类的静态成员函数不能访问非静态的成员函数以及非静态的成员变量, 但是反过来却是成立的. 即:非静态成员函数可以访问静态成员函数和静态成员变量. 这个可以从静态成员的特点来解释,因为静态成员属于类,因此 ...
- Exception in thread "http-bio-8081-exec-3" java.lang.OutOfMemoryError: PermGen space
前言: 在http://www.cnblogs.com/wql025/p/4865673.html一文中我曾描述这种异常也提供了解决方式,但效果不太理想,现在用本文的方式,效果显著. 目前此项目只能登 ...
- div+css的前端工程师的价值体现在哪些方面?
个人认为前端工程师正慢慢演变为产品工程师.wap app, 响应性UI等以html5技术为基础的开发将成为前端工程师的主要工作内容,解决产品跨平台跨设备的实现问题.Javascript, HTML, ...
- 【POJ】【2348】Euclid‘s Game
博弈论 题解:http://blog.sina.com.cn/s/blog_7cb4384d0100qs7f.html 感觉本题关键是要想到[当a-b>b时先手必胜],后面的就只跟奇偶性有关了 ...
- 用户 IIS APPPOOL\DefaultAppPool 登录失败的解决方法
解决方案 1.先查看你的网站使用的是哪个应用程序池 2.设置应用程序池的选项 3.标识选项 选LocalSystem或NetworkService就可以解决问题
- MVC4 错误: 检测到有潜在危险的 Request.Form值
说明: 请求验证过程检测到有潜在危险的客户端输入值,对请求的处理已经中止.该值可能指示存在危及应用程序安全的尝试,如跨站点脚本攻击.若要允许页面重写应用程序请求验证设置,请将 httpRuntime ...
- hdoj 1102 Constructing Roads
题目:http://acm.hdu.edu.cn/showproblem.php?pid=1102 分析:看到这题给出的都是矩阵形式,就知道了可以用Prim算法求MST. #include <i ...
- poj 3625 Building Roads(最小生成树,二维坐标,基础)
题目 //最小生成树,只是变成二维的了 #define _CRT_SECURE_NO_WARNINGS #include<stdlib.h> #include<stdio.h> ...
- APT攻击
http://netsecurity.51cto.com/art/201211/363040.htm