IE内でTDの入力がborder-rightの後にレンダリングされる

Question

IE7のスタイルに問題があります。 このCSSスタイルを使用する

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

.forty-wid 
{ 
    width:40px; 
} 

input 
{ 
    width:100%; 
} 

は、私のtdに2つの境界線を表示します。精密検査の後、それはそうであるようです。

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

は右のボーダーの後にレンダリングされます。誰でもこの回避策を知っていますか？

EDIT：JSBinで試した後、前のtdが次のtdと重なっていることがわかります。これは、この

のborder-left-1 TD1のborder-left-2のborder-right-1 TD2のborder-left-3

のように行って、で私のinput width:100%

サンプルに起因すると思わこれで時間の良い四半期のいじりにもかかわらずhttp://jsbin.com/egaru4/3

Answer 1

..

私はそれがリモートから近い修正するためにIE7/IE8/Firefoxの3 /クロームDEV /オペラに見えるようにすることができる唯一の方法は、使用していましたこの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> 

私は、これには特に満足していませんよ多分誰かが助けることができますか？もしそうでなければ、私は後でもう一回それを使うかもしれない。