なぜIEでの入力のずれ？それはFirefoxとクロムで大丈夫です

Question

なぜ入力がIEで転位しましたか？ FirefoxとChromeでは大丈夫です。入力が画像の下に表示されません。私はここに画像を投稿することができないので、コードに画像URLの代わりに「xxx」を入れ、コメントにはスクリーンショットURLを付けます。おかげでたくさんの

<li class="img"> 
    <div class="pic"> 
     <img width="117px" height="70px" src="attachment/201202/21/1_1329785854VWAO.jpg.thumb.jpg"> 
     <div class="remove" style="display: none;"> 
     </div> 
    </div> 
    <input type="text" placeholder="say something" value="" class="txt"> 
</li> 

li.img { 
    background: none repeat scroll 0 0 #FFFFFF; 
    height: 102px; 
    overflow: visible; 
    padding: 0 4px; 
    position: relative; 
    width: 117px; 
} 
li { 
    float: left; 
    margin-left: 10px; 
} 
li { 
    list-style: none outside none; 
} 
.pic { 
    margin-bottom: 5px; 
    overflow: hidden; 
} 
.txt { 
    border: 1px solid #DEDEDE; 
    color: #999999; 
    float: left; 
    height: 20px; 
    line-height: 20px; 
    margin-left: 0; 
    padding-left: 6px; 
    width: 108px; 
} 

Answer 1

、独自のdivにテキスト入力ボックスを入れて、左にdivのフロート：

<li class="img"> 
    <div class="pic"> 
     <img width="117px" height="70px" src="attachment/201202/21/1_1329785854VWAO.jpg.thumb.jpg"> 
     <div class="remove" style="display: none;"> 
     </div> 
    </div> 
    <div class="txt"> 
     <input type="text" placeholder="say something" value="" class="txt" > 
    </div> 
</li> 

---

li.img { 
    background: none repeat scroll 0 0 #FFFFFF; 
    height: 102px; 
    overflow: visible; 
    padding: 0 4px; 
    position: relative; 
    width: 117px; 
} 
li { 
    float: left; 
    margin-left: 10px; 
} 
li { 
    list-style: none outside none; 
} 
.pic { 
    margin-bottom: 5px; 
    overflow: hidden; 
} 
div.txt { 
    float: left; 
} 
input.txt { 
    border: 1px solid #DEDEDE; 
    color: #999999;  
    height: 20px; 
    line-height: 20px; 
    margin-left: 0; 
    padding-left: 6px; 
    width: 108px; 
}