Ошибка заполнения в FF4 - PullRequest
Новая
       14

Ошибка заполнения в FF4

0 голосов
/ 23 марта 2011

С момента обновления до FF4, похоже, что на одном из моих сайтов неправильно интерпретируется CSS в FF4.Или точнее: если вы наложите скриншоты FF и Chrome, то текст в FF будет на 2-3 пикселя ниже текста в Chrome.Так что это не правильно выровнено по вертикали.Если я уменьшу верхнюю часть отступа в .nav a, чтобы отрегулировать это в FF, то в Chrome он не посередине.

В FF 3.6 все просто выглядело хорошо.Это нормально в IE тоже.Есть идеи?

Более того, текст в FF кажется более широким, чем в Chrome.Вы можете увидеть это на этом img: http://i54.tinypic.com/2nsz6nn.jpg

Первый «Пуск» в FF, второй в Chrome (как и должно быть).Следующий текст - это наложение между FF и Chrome - FF шире.

Это панель навигации на моем сайте, html: 

<div id="nav_wrapper"> 
<div align="center" class="nav"><a href="/1" title="1">Link one</a></div>
<div class="nav_sep"></div>
<div align="center" class="nav"><a href="/2" title="2">Link two</a></div>
<div class="nav_sep"></div>
<div class="nav nav_last" style="width:249px;">
    <div class="right">
     <div class="left">
      <form action="/suche/" method="get" name="nav_searchForm">
       <input type="text" name="s" class="nav_searchInput" />
      </form>
     </div>
     <div class="btn nav_searchBtn"><div class="lf">&nbsp;</div><div class="ct">search</div><div class="rt">&nbsp;</div></div>
    </div>
</div>
<div style="clear:both"></div>

CSS: 

/* navigation */
#nav_wrapper{width:100%;}
.nav{background-image:url(/img/nav.png);background-position:-10px 0px;background-repeat:no-repeat;color:#FFF;height:46px;float:left;font-size:16px;}
.nav a{display:block;color:#FFF;text-decoration:none;padding:15px 18px 10px 18px;}
.nav:hover{background-position:-10px -46px;}
.nav_sep{background-image:url(/img/nav.png);background-position:-444px top;height:46px;float:left;width:2px;}
.nav_last{height:34px;padding:12px 18px 0 18px;}
.nav_searchInput{background-image:url(/img/magnifier.png);background-repeat:no-repeat;background-position:left top;border:1px solid #D5D5D5;font-size:13px;margin:0 4px 0 0;padding:3px 2px 3px 26px;width:146px;}

Есть идеи как это исправить?Я не хочу делать поле Javascript-Clickable (что было бы одним из решений: отказаться от display: block и применить событие javascript onclick, выравнивая по краю вместо заполнения).

Спасибо.

информация: она не зависит от любого другого макета.Протестировал и на чистой странице.

1 Ответ

2 голосов
/ 23 марта 2011

Есть несколько вопросов.Простейшим решением было бы установить высоту строки вашего .nav правила, например, так:

.nav a { line-height: 16px; }

Каждый браузер имеет свой шрифт по умолчанию с засечками и без засечек.Каждый браузер даже имеет разные алгоритмы рендеринга шрифтов.Если вы полагаетесь на текст для блочной модели элемента, для которого вы хотите управлять высотой, всегда устанавливайте line-height и height элемента явно.

...