IE6/IE7中text-indent对input背景的影响

在text-indent在IE6/IE7中的位置偏移BUG一文中讨论过IE6/IE7中inline-block元素设置text-indent对背景图片的影响,这主要是 display:inline-block在IE6/Ie7和IE8中的区别 导 致的。表单中的提交(type=submit)和重置(type=reset)按钮,有时我们为了美化,而使用背景图片,考虑到SEO因素,按钮的 value值不能为空,但又不能在页面上显示出来。这时就可以用text-over:-200em;overflow:hidden;来隐藏了。这时问题 就出现了,在IE6/IE7中背景图片也和文字一块被隐藏了。

解决办法也是一样的。就是给按钮设置display:block或者设置float:left|right来实现display:block。

<input type="submit" class="submit" value="提交" />
<style type="text/css">
.submit{
display:block;
width:150px;
height:30px;
overflow:hidden;
background:url(submit.gif) no-repeat left top;
text-indent:-100em;
}
</style> 由此推断IE6/IE7中input的实现和inline-block类似null

ie7 text-indent input影响的更多相关文章

  1. input text 字体的影响

    字体对input的影响 <html> <head> <meta charset="UTF-8"> </head> <style ...

  2. 给类型为text的input设置value值却无法修改

    给类型为text的input设置value值后就无法修改了 我的页面显示为如下但是退格却无法改变他的值 原来是缺少onChange事件,没法监听value的改变 所以需要添加 onChange={th ...

  3. How to change the button text of <input type=“file” />?

    How to change the button text of <input type=“file” />? Simply <label class="btn btn-p ...

  4. IE7下,input元素相对父级元素错位解决办法

    原因: 当input仅仅包含父元素,父元素拥有margin属性时,IE7的input就会错误的继承margin属性. 解决办法: 给input元素外面套一个span,label这样的内联元素,这样就会 ...

  5. 中文目录对 sublime text 有什么影响?

    用了这软件好几个月了,一直没出现问题.最近做精简时,发现一个奇怪的问题. 相同的配置,为什么两个程序表现得不一样? 难道是哪里的配置不一样? 难道是插件被我精简得太厉害了? 难道是插件有依赖文件被我删 ...

  6. 【转载】input 中 type='text' 的提交问题

    原文链接:http://www.nowamagic.net/html/html_AboutInputSummit.php 有时候我们希望回车键敲在文本框(input element)里来提交表单(fo ...

  7. 隐藏input边框(ie6、ie7)

    去掉元素的边框,我们一贯使用border:none; 但在ie6.ie7下的input[type=text]元素,并没有去掉. 两种解决方案: 1. border:none; 并设置背景backgro ...

  8. input type =text,按回车键自动提交

    1.当form表单中只有一个<input type="text" name='name' />时按回车键将会自动将表单提交 <form id='form1' ac ...

  9. [RxJS] Getting Input Text with Map

    By default, Inputs will push input events into the stream. This lesson shows you how to use map to c ...

随机推荐

  1. bzoj5277: [Usaco2018 Open]Out of Sorts

    被tkj大爷艹爆了5555整套模拟赛都是神仙思路题 那么这题题解 还有一个神仙做法,zory巨神在考场上找规律AC,自己都不会证..我证明了一下(然而这货还是不认可自己的做法) 按照分割点的思路,我们 ...

  2. [.Net] Excel导入导出各种方式分析

    1.引言 1.1解决哪些问题   现在很多公司用的导出基本上采用的通过gridView导出excel,此种导出存在以下几种问题 1.数据量大的时候有时导出有时会让浏览器卡死,因为导出的excel不是真 ...

  3. oracle连接数不够解决

    ora-12516: TNS: 监听程序找不到符合协议堆栈要求的可用处理程 看到如上错误出现,就要查看是否是是数据库连接数被占满了 具体的查询sql如下: select count(*) from v ...

  4. python 网络通讯 服务器端代码demo,能够同时处理多个客户端的连接请求

    这是一个python网络通讯服务器端的代码demo,能够同时处理多个客户端的连接请求. from socket import * import threading from datetime impo ...

  5. Spring《八》AOP/代理类定义

    Spring通知 Interception Around通知 MethodInterceptor类(方法执行前后通知) Before通知 MethodBeforeAdvice类(方法执行前通知) Af ...

  6. jquery.slides.js

    http://slidesjs.com/#docs 一款强大的,专业的幻灯片组件,全方位对幻灯片的速度..全方位的控制: $(function(){ $("#slides").sl ...

  7. Educational Codeforces Round 35

    Nearest Minimums 相同的数里最小的数里的最小距离 Solution Two Cakes Solution Three Garlands 瞎比试 Solution Inversion C ...

  8. Tomcat 报错 记录

    Resource is out of sync with the file system: 该错误为替换了image中的图片而没有进行更新,造成找不到该资源,进而保存,解决只要eclipse刷新一下F ...

  9. MySQL快速创造百万测试数据

    CREATE TABLE `vote_record_memory` ( `id` INT (11) NOT NULL AUTO_INCREMENT, `user_id` VARCHAR (20) NO ...

  10. mac os x install redis-3.2.9

    下载.解压.重命名并且编译安装Redis~ wget http://download.redis.io/releases/redis-3.2.9.tar.gz ~ tar xzf redis-3.2. ...