css中的节点js / jade错误

Question

我正在尝试研究节点js。我将模板转换为节点js，它显示了somme css问题。在模板中有社交媒体图标，宽度= 30像素，填充3像素，边界半径为50％。它在原始主题中显示为一个完美的圆圈。但在节点js转换主题中显示为椭圆。 这是css代码

position: absolute;
width: 30px;
padding: 3px;
border-radius: 50%;
background: #e1e1e1;
font-size: 12px;

当我将填充更改为9px时，转换后的主题非常有效。但我需要知道这是怎么回事。我在谷歌浏览器中测试了这个。请帮忙。

第一个来自原始主题，第二个来自节点转换主题

Answer 1

要获得完美的圆形，元素的宽度和高度必须完全相同。我做了一个例子http://jsbin.com/fuxen/1/edit我将高度设置为：30px以匹配高度。

此外，我添加了text-align：center和line-height：30px（以＆＃34; f＆＃34;垂直居中）。