TD内部的输入在IE7中的边界右边获得呈现

IE7中的样式出现问题。使用这个CSS样式TD内部的输入在IE7中的边界右边获得呈现

table td 
{ 
    padding: 5px; 
    background-color: #EEE; 
    border: solid 1px #777; 
} 

.forty-wid 
{ 
    width:40px; 
} 

input 
{ 
    width:100%; 
}

显示两个边界为我的TD。仔细检查后，它似乎

<td class="forty-wid"> 
<input type="text" value="0" /> 
</td>

得到正确的边界后呈现。任何人都知道这个解决方法？

编辑：用JSBin试用它后，事实证明，前一个TD与下一个TD重叠。它继续这样

左边框1 TD1左边框2右边框1 TD2左边框3

，它似乎被我的input width:100%

样品在引起http://jsbin.com/egaru4/3

来源

2011-01-10 Jonn

如果你可以在[JS Bin]（http://jsbin.com/）上做一个例子，它可能会帮助你得到一个答案（更快）。 – thirtydot 2011-01-10 00:57:27

Ohhh ..好的。谢谢你的提示。我不知道JS Bin。 – Jonn 2011-01-10 01:28:45

尽管乱搞一个小时的良好季度与此..

我可以使它看起来远程接近纠正IE7/IE8/Firefox中的唯一方法3/Chrome浏览器开发/歌剧是使用这fugly（因为外来<div>的，主要是我最终使用。）HTML/CSS：

Live Demo

table { 
    border-collapse: collapse; 
    table-layout: fixed 
} 
.forty { 
    width: 40px 
} 
input { 
    width: 100% 
} 

table td { 
    background-color: #eee; 
    border: solid 1px #777 
} 
table th { 
    color: #222; 
    padding: 6px 5px; 
    text-align: left; 
    background-color: #7f99b0; 
    border: solid 1px #888 
} 
table div { 
    margin: 6px 5px 6px 0; padding: 0 5px 0 5px 
}

<div class="container"> 
    <table width="100%" border="0" cellspacing="0" cellpadding="0"> 
     <thead> 
      <tr> 
       <th class="forty"> 
       H 
       </th> 
       <th> 
       H2 
       </th> 
       <th> 
       H3 
       </th> 
       <th> 
       H4 
       </th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td> 
        <div><input type="text" value="0" /></div> 
       </td> 
       <td> 
        <div>Text here</div> 
       </td> 
       <td> 
        <div><input type="text" /></div> 
       </td> 
       <td> 
        <div><input type="text" /></div> 
       </td> 
      </tr> 
     </tbody> 
    </table> 
</div>

我不是特别高兴，这，也许别人可以帮忙？如果没有，我可能会在以后花更多时间。

来源

2011-01-10 04:22:53 thirtydot

TD内部的输入在IE7中的边界右边获得呈现

回答

相关问题