神奇的IE bug —— input/text外层浮动+边距导致二倍边距

最新推荐文章于 2023-01-11 13:14:02 发布

最新推荐文章于 2023-01-11 13:14:02 发布 · 197 阅读

文章标签：

#IE #XHTML #CSS #HTML #浏览器

xhtml/css 专栏收录该内容

7 篇文章

订阅专栏

本文探讨了IE浏览器中input和textarea元素在外层容器同时设置float和margin属性时出现的双倍边距问题，并提供了几种解决方案。

这个问题比较麻烦，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;">&nbsp;</span>

最后一项是为了避免把别的浏览器挂掉加上的。只实验了ff。预计应该可行。

3，情况允许的前提下，把margin转换成padding。

发现产生此现象的标签，目前只有input和textarea。img, a, span, select 没有此问题。其他标签未测试。

*****只解决了margin-left，margin-right目前没想到解决方案啊*****