Question

由于某些原因，当我更改font-size时，Opera会为定位添加额外的空间（大约2-3px）。您可以在#logo上看到（只需将字体大小更改为36px或更高），或者在#nav上查看较小的字体大小值。在Chrome和Firefox中一切正常，那么为什么Opera会这样做呢？由于我的代码很混乱，并且有大量的代码我在这里上传了它： http://www.filedropper.com/site_5，有人可以查看一下吗？

<div id="menu">
<p id="tek"> Samostalna Zanatska Radnja</p>
<a id="logo" href="index.html">Savić</a>
<ul id="nav">


<li><a class="link" href="#">Početna</a></li>
<li><a class="link" id="izb" href="#">Izrada</a></li>
<li><a class="link" id="ugb" href="#">Ugradnja</a></li>
<li><a class="link" href="#">Galerija</a></li>
<li><a class="link" href="#">Kontakt</a></li>
</ul>
</div>



#logo{
font-size:35px;
top:16px;
left:80px;
text-decoration:none;
font:Arial, Helvetica, sans-serif;
font-weight:bold;
color:#FFF;
 }
 #tek, #logo{
position:absolute;
z-index:4;
}

#nav {
margin: 0;
padding: 0;
position:absolute;
height:25px;
top:75px;
width:400px;

}
#nav li {
/* use this instead of display:inline */
display:inline; /* float left i display:block su tu da bi lista isla u redu jer OPERA zeza sa display inline */
}
.link{
text-decoration:none;
font:Arial, Helvetica, sans-serif;
font-size:12px;
}

我还添加了.link，因为#nav中的每个元素都有类.link。它可以正常使用默认的文本大小值，但是当我将它设置为12px时，我只能在Opera中获得这个奇怪的额外空间。

Answer 1

由于这两个问题都发生在a href标签内，我想知道它们的默认样式是否与它有关？

我可能会尝试

使用font-size之外的其他内容设置px。这有助于：http://pxtoem.com/
在这些元素上设置word-spacing:normal;和letter-spacing:normal;。

另外，你需要支持Opera吗？统计数据显示全球不到3％。

http://gs.statcounter.com/

http://www.upsdell.com/BrowserNews/stat.htm

Answer 2

我在这里找到了一个解决方案： Why is text rendered with a greater font-size in Opera? 显然，Opera以不同的方式呈现默认文本，因此您需要在CSS中为html指定font-size。例如，只需为html添加font-size：16px即可。这不是一个完美的解决方案，它远非完美，但它完成了工作。所有学分都归@phazei

在Opera中定位文本元素时，字体大小会增加额外的空间

2 个答案: