Размер шрифта добавляет дополнительное пространство при размещении текстовых элементов в Opera - PullRequest
0 голосов
/ 29 июля 2011

Почему-то 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.Он отлично работает со значением размера текста по умолчанию, но когда я устанавливаю его на 12 пикселей, я получаю этот странный дополнительный пробел только в Opera.

Ответы [ 2 ]

0 голосов
/ 31 июля 2011

Я нашел решение здесь: Почему текст отображается с большим шрифтом в Opera? Очевидно, Opera отображает текст по умолчанию по-другому, поэтому вам нужно назначить размер шрифта для HTML в вашем CSS. Например, просто добавьте font-size: 16px для HTML, и он должен работать. Это не идеальное решение, оно далеко от идеального, но оно выполняет свою работу. Все кредиты идут на @ phazei

0 голосов
/ 29 июля 2011

Поскольку обе эти проблемы возникают в тегах a href, мне интересно, имеет ли ваш стиль по умолчанию их отношение к этому?

Я мог бы попробовать

  1. , установив font-size с чем-то отличным от px.Это может помочь: http://pxtoem.com/
  2. установка word-spacing:normal; и letter-spacing:normal; для этих элементов.

Кроме того, вам нужна поддержка Opera?Статистика показывает менее 3% по всему миру.

http://gs.statcounter.com/

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

...