这个问题比较麻烦,bug是这样产生的。input/textarea的外层是block形式的容器,这个外层容器同时拥有float和margin-left/rmargin-right属性时候,会在margin的一边产生双倍边距。其中一部分是真正我们要的margin,另一部分说不出什么,看起来可以算是与margin等宽的padding。
举一些例子
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>神奇的 IE Bug</title>
<style type="text/css">
body{background:#FFFFD7;}
div,p,hr{clear:both;}
</style>
</head>
<body>
<!--产生边距的-->
<p>带有margin-left的input</p>
<div style="float:left;margin-left:100px;border:1px solid red;"><input type="button" value="Confirm" /></div>
<p>带有margin-left的textarea</p>
<div style="float:left;margin-left:100px;border:1px solid red;"><textarea></textarea></div>
<!--不产生边距的-->
<p>带有margin-left的a</p>
<div style="float:left;margin-left:100px;border:1px solid red;"><a href="#">link</a></div>
<p>带有margin-left的span</p>
<div style="float:left;margin-left:100px;border:1px solid red;"><span>text</span></div>
<p>带有margin-left的select (同样作为表单项,select就很给面子)</p>
<div style="float:left;margin-left:100px;border:1px solid red;">
<select>
<option>select</option>
</select>
</div>
<p>带有margin-left的img</p>
<div style="float:left;margin-left:100px;border:1px solid red;"><img src="http://www.iteye.com/upload/logo/user/252181/22c9d087-b11d-3d3b-80b5-cd839eea4585.gif?1274326767" /></div>
<hr />
<!--产生边距的-->
<p>带有margin-right的input</p>
<div style="float:left;margin-right:100px;border:1px solid red;"><input type="button" value="Confirm" /></div>
<p>带有margin-right的textarea</p>
<div style="float:left;margin-right:100px;border:1px solid red;"><textarea></textarea></div>
</body>
</html>
这些代码在ie5.5,6,7下大约看到的效果如下
处理方法
1,在input/textarea 与外层容器中再插入一层标签,block、inline的都可以。不过找parent之类的操作就会有点儿问题。
2,不管用什么方法,手动或者js在input/textarea前面插入一行代码
<span style="width:0;overflow:hidden;display:inline-block;float:left;"> </span>
最后一项是为了避免把别的浏览器挂掉加上的。只实验了ff。预计应该可行。
3,情况允许的前提下,把margin转换成padding。
发现产生此现象的标签,目前只有input和textarea。img, a, span, select 没有此问题。其他标签未测试。
*****只解决了margin-left,margin-right目前没想到解决方案啊*****
分享到:
相关推荐
这不是真正的padding 或者 margin,而是一个IE 系列解析的bug。无论清楚input 还是div 的margin,padding值。那个边距仍然存在。据称,这个边距的值为5em,本人没有做验证,但暂时相信吧! 主要是说一下解决方案: ...
新书样章试读,0 bug——CC++商用工程之道
程序完美运行无BUG,独家开发,支持6种开通模式。 套餐次数和价格可以自定义在后台进行修改 支付直接对接易支付或码支付就可以了,每个IP均有免费提问一次(可以自定义),然后自动强制跳转登录 登录之后可购买付费...
若二级域名或子目录,则会导致某功能无法正常使用) 2. 设置目录属性 以下这些目录需要可读写权限 ./data/cache ./data/compile ./data/upload ./data/upload/tempimg ./data/logo ./data 含子目录 3. 执行安装脚本 /...
紧急修复上一个版本导致的上下文超限提示失效BUG 新增网站公告标题自定义设置功能 后台公告设置里面修改 修复网站公告如何内容太长超出屏幕限制BUG 新增网站基本配置模块 例如首页"使用示例"板块放到数据库了 修改...
实现弹出网页遮罩层,可兼容IE6/IE7/IE+++等; 缩放浏览器时,内容狂始终居中; 有点小bug,在IE6下,遮罩层颜色没透明,屎黑色,等我有空完善下。
Java高手真经 - Java Web系统设计与架构 (二) UML: (1)UML样例源文件(8个样例文件) uml/uml.mdl //01.UML快速入门 uml/usecase.mdl //02.用例图 uml/class.mdl //03.静态图——类图、对象图、包图 ...
综合实例——Bug管理系统 (3)设计模式样例(24个讲解样例程序) pattern/src/principle/liskovsubstitution//10.3.2里氏代换原则 pattern/src/creation/factorymethod //11.1工厂方法模式 pattern/src/creation/...
综合实例——Bug管理系统 (3)设计模式样例(24个讲解样例程序) pattern/src/principle/liskovsubstitution//10.3.2里氏代换原则 pattern/src/creation/factorymethod //11.1工厂方法模式 pattern/src/creation/...
综合实例——Bug管理系统 (3)设计模式样例(24个讲解样例程序) pattern/src/principle/liskovsubstitution//10.3.2里氏代换原则 pattern/src/creation/factorymethod //11.1工厂方法模式 pattern/src/creation/...
状态图——Bug管理系统 uml/statechart_atm.mdl //05.状态图——ATM机存取款 uml/statechart_thread.mdl //05.状态图——Java线程类Thread uml/activity_bug.mdl //06.活动图——Bug管理系统 uml/activity_atm....
状态图——Bug管理系统 uml/statechart_atm.mdl //05.状态图——ATM机存取款 uml/statechart_thread.mdl //05.状态图——Java线程类Thread uml/activity_bug.mdl //06.活动图——Bug管理系统 uml/activity_atm....
状态图——Bug管理系统 uml/statechart_atm.mdl //05.状态图——ATM机存取款 uml/statechart_thread.mdl //05.状态图——Java线程类Thread uml/activity_bug.mdl //06.活动图——Bug管理系统 uml/activity_atm....
综合实例——Bug管理系统 (3)设计模式样例(24个讲解样例程序) pattern/src/principle/liskovsubstitution//10.3.2里氏代换原则 pattern/src/creation/factorymethod //11.1工厂方法模式 pattern/src/creation/...
综合实例——Bug管理系统 (3)设计模式样例(24个讲解样例程序) pattern/src/principle/liskovsubstitution//10.3.2里氏代换原则 pattern/src/creation/factorymethod //11.1工厂方法模式 pattern/src/creation/...
综合实例——Bug管理系统 (3)设计模式样例(24个讲解样例程序) pattern/src/principle/liskovsubstitution//10.3.2里氏代换原则 pattern/src/creation/factorymethod //11.1工厂方法模式 pattern/src/creation/...
状态图——Bug管理系统 uml/statechart_atm.mdl //05.状态图——ATM机存取款 uml/statechart_thread.mdl //05.状态图——Java线程类Thread uml/activity_bug.mdl //06.活动图——Bug管理系统 uml/activity_atm....
Flex:Web报表引擎——MyReport 2.3.0.0 + 免Flex开发集成版 --新增功能:重新设计表达式解析引擎,支持更多函数,运算符,支持运算符函数递归嵌套 --新增功能:重新设计表达式编辑器 --新增功能:新增字体颜色设置...
Available only in bugis n great world la e buffet... Cine there got amore wat... spam Free entry in 2 a wkly comp to win FA Cup final tkts 21st May 2005. Text FA to 87121 to receive entry question...