Поля, установленные в пикселях, несовместимы между Firefox, Chrome и IE8. - PullRequest
Новая
       25

Поля, установленные в пикселях, несовместимы между Firefox, Chrome и IE8.

0 голосов
/ 31 января 2012

В этом случае IE8 и Chrome выглядят одинаково, но Firefox отображает что-то другое:

В Firefox:

enter image description here

В Internet Explorer 8:

enter image description here

В Google Chrome:

enter image description here

Почему последние два имеют очень тонкое разделение?

Вот HTML: 

    <ul id="navigation">
        <li><a href="@Url.Action("Index", "Home")">HOME</a></li>
        <li><a href="@Url.Action("Index", "OurApproach")">OUR APPROACH</a></li>
        <li><a href="@Url.Action("Index", "Menu")">MENU</a></li>
        <li><a href="@Url.Action("Index", "Contact")">GET IN TOUCH</a></li>
    </ul>

Вот CSS, (с использованием SCSS): 

/* The inconsistency is in the margin-top rule of the UL. */
#navigation { /* This is just a UL element. I used the margin-top, to position it. */
    float: left;
    list-style-type: none;
    margin-left: -16px;
    margin-top: 117px;

    li {
        background-color: #934B00;
        @include nav-radius;
        color: White;
        float: left;
        font-size: 14px;
        margin-right: 6px;
        padding: 5px;
        cursor:pointer;

         a { text-decoration:none; color:White; }
         a:hover { text-decoration:none; color:#904E00;}
         a:visited { text-decoration:none; color:White; }
         a:link { text-decoration:none; color:White; }
    }

    li:hover {
        color:#904E00;
        background-color:#EEA74F;
    }
}

Ответы [ 2 ]

1 голос
/ 31 января 2012

На самом деле это похоже на проблему с высотой строки - и учитывая, что normalize.css не сбрасывает ее для <li>, это может быть.

Попробуйте: 

line-height: 1;

... и поэкспериментируйте с ним, чтобы понять, имеет ли это какое-то значение.

( Обновление: Переписан весь ответ, извините)

0 голосов
/ 31 января 2012

Несколько вещей, которые нужно попробовать - во-первых, вы должны быть уверены, что библиотека Sass CSS не проблема, поэтому тестируйте без нее.

Во-вторых - используйте Firebug в Firefoxи эквивалент Chrome ( Firebug light или что-то в этом роде ) для проверки элементов. Используя HTML-инспектор и вкладку "Макет" , вы сможете точно увидеть, как эти элементы стилизируются / отображаются.

Наконец, если вы еще этого не сделалииспользуйте таблицу стилей сброса CSS, чтобы все браузеры играли хорошо. Хорошее обсуждение лучших таблиц сброса здесь .

...