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中的邊界右邊獲得呈現

回答

相關問題