Question

我只使用CSS3创建图标。到目前为止一直很好，但我遇到了最简单的问题。我只想要一个＆＃34;！＆＃34;以圆圈为中心，但其位置不一致。有时它是一个像素更高，一个像素在左边，或两者。我不知道造成这种情况的原因。

.nos {
    position: relative;
    height: 12px; width: 12px;
    border: 2px solid #e04006;
    border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%;
    display: block;
    color: #e04006;
    overflow: hidden;
    cursor: default;
}

.nos:hover {
    overflow: visible;
}

.nos span {
    position: absolute;
    padding-left: 18px;
    display: block;
    font-size: 14px; line-height: 16px; text-decoration: underline;
    white-space: nowrap;
}

.nos:before {
    content: '\21';
    position: absolute; top: 0; bottom: 0; left: 0; right: 0;
    margin: 0;
    height: 16px; width: 16px;
    display: block;
    font-family: "Lucida Console", Monaco, monospace; text-align: center; font-size: 12px; line-height: 12px; font-weight: bold; 
}

Answer 1

从height: 16px; width: 16px;

中删除.nos:before

Update Fiddle

Answer 2

看起来我设法在经过一些修补之后修复它。不确定这个伎俩是什么。

<div id="wrapper"> <!-- background -->
  <div id="container"> <!-- white -->
    <div id="hover-container"> <!-- gray -->
      <div id="square"></div> <!-- square -->
    </div>
  </div>
</div>

Fiddle

CSS3图标：插入的内容不是一致的

2 个答案: