ie上div中包含input输入框设置margin出现有关问题，不知道有人遇到吗，是不是ie的bug
日期：2014-05-17 浏览次数：20811 次
ie下div中包含input输入框设置margin出现问题，不知道有人遇到吗，是不是ie的bug
示例代码
这样input和div之间貌似有空隙，我试了下，不是input的外补丁，也不是div的内补丁，不知道算什么，但我input 两边输入文字的话，那个空隙就没了。
不知道遇到这种问题应该怎么解决，我包含input的div可能要同时设置margin和padding
------解决方案--------------------
这样就可以，input->float:left
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<div style="width:100px;margin-right:0px;margin-top:20px;border:1px solid #000000"><input type="text"style="width:100%;float:left;border:1px solid #aacc00; "/></div>
</body>
</html>
------解决方案--------------------
this?
示例代码
- HTML code
<div style="width:100px;margin-left:20px;margin-right:20px;margin-top:20px;border:1px solid #000000"><input type="text"style="width:100px;" /></div>
这样input和div之间貌似有空隙，我试了下，不是input的外补丁，也不是div的内补丁，不知道算什么，但我input 两边输入文字的话，那个空隙就没了。
不知道遇到这种问题应该怎么解决，我包含input的div可能要同时设置margin和padding
------解决方案--------------------
这样就可以，input->float:left
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<div style="width:100px;margin-right:0px;margin-top:20px;border:1px solid #000000"><input type="text"style="width:100%;float:left;border:1px solid #aacc00; "/></div>
</body>
</html>
------解决方案--------------------
this?
- HTML code
<div style="width:100px;margin-left:20px;margin-right:20px;margin-top:20px;border:1px solid #000000;"><input type="text"style="width:100px;margin:-2px 0;" /></div>
------解决方案--------------------
我都用float解决的。另附上开心网输入框效果。
- HTML code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<style type="text/css">
body{font-size:12px;}
.it{display:table;border:1px solid #999;float:left}
.it input{width:225px;height:13px;border:1px solid #fff;padding:3px;+margin:-1px 0;font-size:12px}/* 实际占位宽度高度 另 +10px */
.it .itc{border-top:1px solid #000;border-left:1px solid #000}
.ib{float:left;}
.ib input{border:1px solid #999;padding:0 10px;height:23px;line-height:20px;}
</style>
<div style="width:100%;overflow:hidden;border:1px solid red">
<div style="float:left;margin:5px 5px 0 5px">实得分</div><span class="it"><input type="text" onfocus="this.className='itc'" onblur="this.className=''"/></span>
<span class="ib"><input type="button" value="搜索"/></span>
</div>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
