Question

我正在尝试制作一个带有单个字母的圆形div。它在Ubuntu（16.04）-Mozilla上运行良好，但现在文本在Windows10-Chrome中没有div。Please see this image 这是代码：HTML：

<div class="Try"><p style="font-family: Bungee; font-size: 8mm;">A</p></div>

CSS：

.Try p,(some other Classes which works fine){
width: 10mm;
height: 10mm;
border-radius: 100%;
background: rgba(0,0,0,0.25);
color: #fff;
text-align: center;
margin: 10px;
display: block;
float: right;
bottom: 0;
box-shadow: 3px 3px 5px black;
right: 0;
bottom: 0;
position: fixed;
margin-right: 60mm;
word-wrap: break-word;
}

https://jsfiddle.net/SamX13/L1jtjznr/＆lt; ---这是代码再现问题

Answer 1

在Windows中，浏览器似乎认为Bungee字体的行高比Linux高。我不知道是什么导致它，但解决方案是在css中明确设置行高。

.try p, .abc p, .xyz p {
  width: 10mm;
  height: 10mm;
  border-radius: 100%;
  background: rgba(0, 0, 0, 0.25);
  color: #fff;
  text-align: center;
  margin: 10px;
  float: right;
  bottom: 0;
  box-shadow: 3px 3px 5px black;
  right: 0;
  bottom: 0;
  position: fixed;
  margin-right: 60mm;
  word-wrap: break-word;
  line-height: 1cm;           /* new */
}

.try p {
  margin-bottom: 42mm;
  border: 2px solid red;
}

.abc p {
  margin-bottom: 25mm;
}

.xyz p {
  margin-bottom: 8mm;
}

<link href="https://fonts.googleapis.com/css?family=Bungee|Permanent+Marker|Electrolize|Yellowtail" rel="stylesheet">

<div class="try">
  <p style="font-family: 'Bungee'; font-size: 8mm;">A</p>
</div>
<div class="abc">
  <p style="font-family: 'Permanent Marker'; font-size: 8mm;">B</p>
</div>
<div class="xyz">
  <p style=" font-size: 8mm; font-family: 'Electrolize';">C</p>
</div>

（请注意，我还将底部边距缩小到适合未扩展片段的整个内容。所以不要将所有内容复制回CSS，只复制新行。）

单词在Chrome中不在Div中，但在mozilla上没有

1 个答案: