在 Opera 中定位文本元素时，字体大小会增加额外的空间
由于某种原因，当我更改字体大小时，Opera 会为定位添加额外的空间（大约 2-3 像素）。您可以在 #logo 上看到这一点（只需将字体大小更改为 36 像素或更高），或者在 #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 中的每个 a 元素都有类 .link。 它在默认文本大小值下工作得很好，但是当我将其设置为 12px 时，我得到了这个奇怪的额外空间，仅在 Opera 中。
For some reason Opera adds extra space to positioning (about 2-3px) when I change font-size. You can see that on #logo (just change the font-size to 36px or higher), or on #nav, for a smaller font-size value.
Everything works fine in Chrome and Firefox, so why is Opera doing this?
Since my code is messy and there's a ton of it I've uploaded it here:
http://www.filedropper.com/site_5, so can someone please check it out?
<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;
}
I've also added .link because every a element in #nav has class .link.
It works fine with default text-size value, but when I set it to 12px I get this strange extra space Only in Opera.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
由于这两个问题都发生在
a href标记内，我想知道它们的默认样式是否与此有关？我可能会尝试
px以外的其他内容设置font-size。这可能会有所帮助： http://pxtoem.com/word-spacing:normal;以及这些元素上的letter-spacing:normal;。另外，需要支持 Opera 吗？统计数据显示，全球范围内的取货率不到 3%。
http://gs.statcounter.com/
http://www.upsdell.com/BrowserNews/stat.htm
As both these issues are happening within
a hreftags, I wonder if your default style for them has anything to do with it?I might try
font-sizewith something other thanpx. This could help: http://pxtoem.com/word-spacing:normal;andletter-spacing:normal;on those elements.Also, do you need to support Opera? Stats show less than 3% pickup worldwide.
http://gs.statcounter.com/
http://www.upsdell.com/BrowserNews/stat.htm
我在这里找到了解决方案：
为什么使用更大的字体大小呈现文本在歌剧中？
显然 Opera 渲染默认文本的方式不同，因此您需要在 CSS 中将 font-size 分配给 html。
例如，只需为 html 添加 font-size:16px 就可以了。
这不是一个完美的解决方案，远非完美，但它完成了工作。
所有积分均归@phazei
I've found a solution here:
Why is text rendered with a greater font-size in Opera?
Apparently Opera renders default text differently, so you need to assign font-size to html in your CSS.
For example just add font-size:16px for html and it should work.
This is not a perfect solution, it's far from perfect, but it gets the job done.
All credits go to @phazei