为什么IE下<button>中的<span>显示不完全？

Question

把span绝对定位到button的右上角。在chrome，ff下都表现正常，ie下却显示不完全，这是什么原因？

<button class="eui-btn eui-btn-blue btn-upload">附件
    <span class="badge">1</span>
</button>

demo地址：http://jeremyfan.github.io/lab/003_buttons/buttons.html
（最下面的那个带徽章的按钮，在chrome下正常，在ie下显示不完全 已修复0.0）

（ps：貌似有个小bug：编辑问题时的预览窗口中网址中不能正常显示下划线。）

Answer 1

IE8+的默认样式表里面有这一句：

button {
    background-color: #F0F0F0;
    border-width: 3px;
    box-sizing: border-box;
    font-family: sans-serif;
    font-size: 10pt;
    overflow: hidden;
    padding: 1px 8px;
    text-align: center;
    zoom: 1;
}

所以你需要额外的取消覆写掉overflow:hidden，否则button元素的子元素的溢出部分将会被隐藏。

.eui-btn { overflow:visible; }

---

再贴一次，浏览器默认CSS样式表：

• IE：http://www.iecss.com/
• WebKit在http://trac.webkit.org/browser/trunk/Source/WebCore/css（包括 html.css,fullscreen.css,quirks.css等）
• Firefox 在resource://gre-resources/ 或者在线版：http://mxr.mozilla.org/mozilla-central/source/layout/style/