开发者

Font-size adds extra space when positioning text elements in 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 开发者_StackOverflow中文版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.


As both these issues are happening within a href tags, I wonder if your default style for them has anything to do with it?

I might try

  1. setting the font-size with something other than px. This could help: http://pxtoem.com/
  2. setting word-spacing:normal; and letter-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


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

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜