css中的节点js/jade错误

Question

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

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

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

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

Answer 1

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

此外，我添加了 text-align: center 和 line-height: 30 像素（使“f”垂直居中）。