我正在寻找一种方法做一个跨浏览器iphone类徽章在CSS3。我显然喜欢使用一个div，但替代解决方案将是好的。重要的因素是它需要在所有浏览器中水平和垂直居中。
关于这些通知的一个有趣的设计问题是它们不能具有指定的宽度(高度是固定的) – 他们应该能够处理[在ascii图](1)和(1000)，其中(1000)不是一个完美的圆形，而是看起来更像一个胶囊。
编辑：附加约束(来自Steven)：
解决方法
水平居中很容易：text-align：center ;.文本在元素内的垂直居中可以通过设置行高等于容器的高度来实现，但是这在浏览器之间有细微的差别。对于小元素，如通知徽章，这些更加明显。
更好的是设置line-height等于font-size(或稍小)，并使用填充。你必须调整你的身高以适应。
这里是一个仅限CSS，单个< div>看起来很像iPhone的解决方案。他们扩大内容。
演示：http://jsfiddle.net/ThinkingStiff/mLW47/
输出：
CSS：
.badge {
background: radial-gradient( 5px -9px,circle,white 8%,red 26px );
background-color: red;
border: 2px solid white;
border-radius: 12px; /* one half of ( (border * 2) + height + padding ) */
Box-shadow: 1px 1px 1px black;
color: white;
font: bold 15px/13px Helvetica,Verdana,Tahoma;
height: 16px;
min-width: 14px;
padding: 4px 3px 0 3px;
text-align: center;
}
HTML：
<div class="badge">1</div> <div class="badge">2</div> <div class="badge">3</div> <div class="badge">44</div> <div class="badge">55</div> <div class="badge">666</div> <div class="badge">777</div> <div class="badge">8888</div> <div class="badge">9999</div>
