为什么IE下<button>中的<span>显示不完全？
把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：编辑问题时的预览窗口中网址中不能正常显示下划线。）
寂寞笑处男
11 years, 8 months ago
Answers
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/
绫小路华恋
answered 11 years, 8 months ago
