Несоответствия полей между Firefox и Chrome / Safari - PullRequest
Новая
       22

Несоответствия полей между Firefox и Chrome / Safari

3 голосов
/ 21 мая 2011

Кажется, у меня небольшая проблема с некоторым интервалом между линиями между Firefox и Safari / Chrome.

Это первое изображение показывает, как ссылки слева и строка текста после таблицы нанижняя часть должна выглядеть примерно так:

Как выглядит веб-страница в Safari / Chrome

Как видите, ссылки хорошо выровнены с прямоугольником "первого генезиса"group "logo.

Вот как это выглядит в Firefox

Как видите, ссылки немного растянуты по вертикали слева, таким образом, вызывая днолиния, чтобы немного сместиться вниз.

Я обнаружил, что проблема заключается в пределе поля: 1px;который я дал каждой ссылке в наборе ссылок (дома, о нас, продуктах, контактах), и похоже, что firefox делает этот марж на 1px намного больше, чем Safari или Chrome, и искажает его.

Я пыталсядобавление универсального тега

  • {margin: 0;обивка: 0;border: 0;}

Но, похоже, это не помогает.Есть идеи, как это исправить в Firefox?Вот фактическая ссылка: www.snowwhitepowers.com/genesis

Ответы [ 2 ]

1 голос
/ 19 октября 2011

Речь идет о том, как разные браузеры отображают разные шрифты. (Вы заметите, что Verdana, например, хорошо отрисовывается обоими)

0 голосов
/ 21 мая 2011

Я бы отредактировал вашу CSS следующим образом: 

ul.link{
    list-style:none;
    /*rest of your rules*/
}

ul.links li{
    display:block;
    width:145px; /* or however wide the ul is*/
    height:20px; /* or however tall they need to be*/
    line-height:20px; /* setting the line-height equal to the height centers text vertically*/
    border-top:1px dashed #5c6b40;
}

ul.links a{
    /* styles for links */
}

Вам также нужно будет отформатировать HTML более семантически.<li class="dottedline> ничего не делает для вас, и было бы намного лучше просто поставить границу на <li>

Что-то вроде: 

<ul class="links">
    <li><a href="home.html" target="iframe">Home</a></li>
    <li><a href="about.html" target="iframe">About Us</a></li>
    <li><a href="eggroll.html" target="iframe">Products</a></li>
    <li style="border-bottom:1px dashed #5c6b40;"><a href="contact.html" target="iframe">Contact Us</a></li>
</ul>
...