css - 为什么在IE中输入错位？在firefox和chrome中都可以

Question

为什么在IE中输入错位？在 Firefox 和 Chrome 中没问题。输入没有出现在图像的右侧。由于我无法在此处发布图片，因此我将在代码和 css 中放置“xxx”而不是图片 url，并在评论中放置截图 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;
}