html - 像素中具有相同高度和宽度的元素呈现为非正方形

Question

我正在尝试实现一个简单的三个垂直点菜单，但遇到了一些相当奇怪的行为。尽管它们都具有确定的高度和宽度，但这三个点呈现为非正方形，似乎取决于祖父容器的尺寸。我尝试使用px、rem、em和百分比来调整它们的大小，但问题仍然存在。

我还尝试通过显式设置父元素的宽度和高度并将其设置为 flexbox 以及删除父元素和点上的所有填充和边距来放置点，但似乎没有任何东西可以缓解这个问题。代码如下所示：

.grandparent {
  display: flex;
  width: 100%;
  margin-bottom: 10px;
  align-items: center;
}

.item1 {
  height: 50px;
  width: 50px;
  margin-left: 15px;
  height: 50px;
  width: 50px;
  position: relative;
}

.item1 img {
  border-radius: 50%;
  height: 50px;
}

.item2 {
  flex: 1 1;
}

.title {
  text-align: left;
  margin: 0 0 5px 13px;
  font-size: 20px;
  font-weight: 400;
}

.subtitle {
  text-align: left;
  margin-left: 13px;
  margin-top: -9px;
  font-size: 13px;
  color: #808080;
}

.parent {
  margin-right: 11px;
  padding: 5px 8px;
  cursor: pointer;
}

.dot {
  width: 6px;
  height: 6px;
  margin-bottom: 4px;
  border-radius: 50%;
  background-color: #808080;
}

.no-appearance {
  appearance: none;
  border: 0;
  background: none;
}

<div class="grandparent" style="width: 375px; height: 50px">
  <div class="item1"><a href="#"><img src="https://picsum.photos/50/50" /></a></div>
  <div class="item2">
    <div class="title">Example text</div>
    <div class="subtitle">Example text</div>
  </div>
  <button class="parent no-appearance">
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
  </button>
</div>

编辑：我在片段中添加了更多代码以尝试重现该问题，但不幸的是，即使它在我的开发环境中始终可以重现，它似乎也无法重现。

下面是当祖父母为 410x50 时如何在 Chrome 88.0 中呈现的示例：

...这是祖父母为 375 x 50 时的样子：

知道这里可能会发生什么吗？

标签： htmlcss

Answer 1

html-entie⋮呢？

https://www.w3schools.com/charsets/ref_html_entities_v.asp

.target {
  position: relative;
  width: 100%;
  margin-bottom: 10px;
}
.target::after {
  position: absolute;
  right: 0;
  top: 0;
  font-size: 2em;
  color: #808080;
  content: '\0022EE';
}
.target:hover::after{
  cursor: pointer;
}

<div class="target"></div>