IE浏览器下float之间出现的小缝隙？

只有在IE下出现这种情况？

html：

<div class="report">
    <form action="">
       <div class="comment_frame clearfix">
          <textarea type="text" class="comment_text"></textarea>
          <a class="submit_report" href="#">发表</a>                        
       </div>
    </form>
    <a class="biaoqing" href="#"><span class="toolbar-biaoqing"></span>添加表情</a>
 </div>

css如下：

.report {
  width: 576px;
  padding: 10px 27px;
  background-color: #e6e5e5;
}
/* line 633, ../sass/other.scss */
.show_username {
  font-size: 14px;
  border-bottom: 10px;
}
/* line 638, ../sass/other.scss */
.comment_text {
  resize: none;
  width: 504px;
  height: 62px;
  border: 1px solid #139667;
}
/* line 645, ../sass/other.scss */
.submit_report {
  float: right;
  width: 66px;
  line-height: 68px;
  text-align: center;
  color: #fff;
  background-color: #139667;
}
.clearfix {
  *height: 1%;
}
/* line 4, ../sass/_once.scss */
.clearfix:after {
  clear: both;
  content: '.';
  display: block;
  height: 0;
  line-height: 0;
  overflow: hidden;
}

不知为什么会多出几px？

---

试试在.comment_text上设置zoom:1;如果还不行，在父容器.comment_frame上面设置font-size:0;在.comment_text上设置font-size:14px

---

关于缝隙
设置textarea和a均左浮动，父元素清除浮动即可。

关于大小不一致
看一看两者的盒模型，可能是padding或者border的问题。
有时候，box-sizing:border-box也是需要的。

---

如上所说,一起float:left就解决了,如果你想使用原有的方案,那就麻烦一点.
首先你要知道不同浏览器对元素的预设css是不一样的,margin,padding什么的都不同,首先你就要消除这些差异.

css    .comment_text {
        resize: none;
        width: 504px;
        height: 66px;
        border: 1px solid #139667;
        display: inline-block;
        padding: 0;
        margin: 0;
    }
    .clearfix {
        display: inline-block;
    }

应该也可以解决

---

给textarea和a一起左浮动不就好了。

---

textarea和a的一起左浮的话，就不会出现空隙了

---

a标签block化呢

---

试试textarea和a之间不要换行