Firefox 和 chrome 中的 CSS 差异

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：您不能直接在 <ul> 中使用 <div>。把<div>的样式放到<ul>里面，把<span>s改成<li>s。 然后它在 Firefox 和 Chrome 中看起来是一样的。

接下来，您应该摆脱负上边距和总体上的相对定位，而是执行以下操作：

.css_sprite 一个 { 显示：内联块； }

这应该是一个开始，将你带到你应该能够继续前进的地步。

Answer 2

当您将主重置应用于您的 CSS（位于文档顶部）时，您会重置所有浏览器设置，以便您在不同浏览器中获得更一致的网页显示。唯一的缺点是你必须为你使用的所有东西设计样式。这应该不是问题。

这是我主要用于我所做的一切的主重置。

/* - 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（我知道这很无聊，但也许你会节省很多时间）。

然后，检测哪个浏览器正在使用用户（I used the script you can download here, that it´s easy to add to your project and works great）。

如果浏览器是 Chrome，请使用您的特殊 CSS，如果不是，请使用您用于 Firefox 的 CSS。