文本中的点：宽度/高度（em 和边框半径）

Question

我想做一件非常简单的事情。 文本中的一个点。我想在em中指定点的大小。

height: 0.35em;
width: 0.35em;
border-radius: 50%;

我的问题是圆点看起来不圆。

如果我以 px 为单位定义大小，它会起作用。

height: 6px;
width: 6px;
border-radius: 50%;

我认为问题在于尺寸小。这有什么诀窍吗？

请看这里： http://jsfiddle.net/4rtpfu18/

编辑： 我通过使用 svg 解决了这个问题，它似乎在不同的字体大小下都能正常工作。用 svg 来做这么简单的事情感觉像是绕道而行。

height: 0.375em;
width: 0.375em;
display: inline-block;
bottom: 0.11em;
position: relative;
margin-left: 0.1em;
margin-right: 0.1em;
background-image:url('data:image/svg+xml;charset=utf-8,%3Csvg viewBox=%220 0 10 10%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Ccircle cx=%225%22 cy=%225%22 r=%225%22 /%3E%3C/svg%3E');

Answer 1

如果您在em 中使用等效编号px，则它可以正常工作。

我在this link找到它。

p{
  font-size: 100%;
}


.circle{    
    height: 0.375em;
    width: 0.375em;
    background-color: black;
    border-radius: 50%;
    display: inline-block;
    bottom: 0.23em;
    position: relative;
    margin-left: 0.1em;
    margin-right: 0.1em;
    }
    
    .circle-px{    
    height: 6px;
    width: 6px;
    background-color: black;
    border-radius: 50%;
    display: inline-block;
    bottom: 0.23em;
    position: relative;
    margin-left: 0.1em;
    margin-right: 0.1em;
    }

<p>
Lorem Ipsum <span class="circle"></span> Lorem Ipsum
</p>
<p>
Lorem Ipsum <span class="circle-px"></span> Lorem Ipsum
</p>