CSS различия в Firefox и Chrome

Question

Я пытаюсь воссоздать свой виджет категории, потому что я хочу объединить маленькие изображения в спрайты CSS.Код хорошо выглядит в Firefox, но в Chrome между элементами есть большие пробелы.

Мне нужна техника для размещения уникальных ссылок CSS в одной строке, и мне нужно больше строк.Это работает в Firefox, но не в Google Chrome.

HTML :

<ul class="css_sprite">

    <div style="height: 55px; width: 260px; background-color: transparent;">

        <span class="upper0">
            <a href="#" class="rss_small"></a>
            <a href="#" class="follow_icon"></a>
            <a href="#" class="category">>> 1</a>
        </span>

        <span class="upper1">
            <a href="#" class="rss_small"></a>
            <a href="#" class="follow_icon"></a>
            <a href="#" class="category">>> 2</a>
        </span>

        <span class="upper2">
            <a href="#" class="rss_small"></a>
            <a href="#" class="follow_icon"></a>
            <a href="#" class="category">>> 3</a>
        </span>

    </div>
</ul>

CSS:

.css_sprite
{
    list-style:none;
    list-style-type:none;
}

.css_sprite a 
{
    display: block;
    height: 15px;
    outline: none;
}

.css_sprite a.rss_small
{
    background-image:url('http://static.tumblr.com/puafveu/Uoilxj9e9/sombined_imges_for_css_sprites.png');
    background-position:-1px 0px;
    width: 49px;
    height: 15px;
    border: 0px;
}

.css_sprite a.follow_icon
{
    background-image:url('http://static.tumblr.com/puafveu/Uoilxj9e9/sombined_imges_for_css_sprites.png');
    background-position:-32px -15px;
    width: 15px;
    height: 15px;
    position: relative;
    left: 52px;
    top: -15px;
}

.css_sprite span.upper0
{
    position: relative;
    top: -0px;
}

.css_sprite span.upper1
{
    position: relative;
    top: -27px;
}

.css_sprite span.upper2
{
    position: relative;
    top: -54px;
}

.css_sprite a.category
{
    position: relative;
    left: 73px;
    top: -33px;
}

Answer 1

Прежде всего, ваша разметка не является допустимым HTML: вы не можете использовать <div> непосредственно внутри <ul>. Поместите стиль <div> в <ul> и измените <span> s на <li> s. Тогда это будет выглядеть одинаково в Firefox и Chrome.

Затем вы должны избавиться от отрицательных верхних полей и относительного позиционирования в целом и сделать что-то подобное:

.css_sprite a { дисплей: встроенный блок; }

Это должно сделать это для начала, чтобы привести вас к точке, в которой вы должны быть в состоянии подняться.

Answer 2

Когда вы применяете мастер-сброс к своему CSS (в верхней части документа), вы сбрасываете все настройки BROWSER, чтобы обеспечить более согласованное отображение вашей веб-страницы в разных браузерах. Единственным недостатком является то, что вы должны стилизовать все, что вы используете. Что не должно быть проблемой.

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

/* - MASTER.RESET <<<--------*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, hr, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video, active, hover, selected {
    margin: 0;
    padding: 0;
    border: 0;
    outline: none;
    text-decoration: none;
}

ol,ul {
    list-style: none;
}

Answer 3

Это происходит потому, что размер пикселей в Chrome больше, чем в Firefox.

Возможно, это не лучшее решение, но оно сработало для меня и устранило проблему.

Сначала создайте «специальный» документ CSS с теми же именами классов, изменив значение пикселей, изменив их на Chrome (я знаю, это скучно, но, возможно, вы сэкономите много времени на этом).

Затем определите, какой браузер использует пользователя ( Я использовал скрипт, который вы можете скачать здесь, который легко добавить в ваш проект и прекрасно работает ).

Если браузер Chrome, используйте свой специальный CSS, если это не так, используйте CSS, который вы используете для Firefox.