Question

我尝试重新创建我的类别小部件，因为我想将小图像合并到CSS sprites。代码在firefox中看起来不错，但在chrome中，项目之间有更大的空格。

我需要一些技巧将独特的css链接放在同一行，我需要更多行。这适用于Firefox，但不适用于谷歌浏览器。

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>更改为<li> s。然后它在Firefox和Chrome中看起来会一样。

接下来，你应该摆脱负的顶部边缘和一般的相对位置，而不是做那样的事情：

.css_sprite a { display：inline-block; }

这应该是一开始就让你达到一个你应该能够继续前进的地步。

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。

firefox和chrome的CSS差异

3 个答案: