html - 带有 Div 和 Float 的 CSS 间距

Question

我有以下 html:

<div class="count-unit">
    <div class="count-digit digit0"></div>
    <div class="count-digit digit6"></div>
</div>
<div class="count-unit">
    <div class="count-digit digit0"></div>
    <div class="count-digit digit4"></div>
</div>
<div class="count-unit">
    <div class="count-digit digit4"></div>
    <div class="count-digit digit2"></div>
</div>
<div class="count-unit">
    <div class="count-digit digit3"></div>
    <div class="count-digit digit9"></div>
</div>

与每个“.count-digit”相关联的是一个 sprite(即背景图像)，代表一个数字的 png。我试图让 Sprite 以间距水平显示，如下所示:

06 04 42 39

我使用的 CSS 如下所示:

     .count-unit 
     {
         margin: 0 20px 0 20px;
         padding: 0 20px 0 20px;
     }

     .count-digit { 
        background-image     : url(Images/numbers.png); 
        background-color     : transparent; 
        background-repeat    : no-repeat; 
        float: left;
     } 

     .digit0 { 
        height               : 44px; 
        width                : 30px; 
        background-position  : -0px -0px; 
     } 

仅显示了一个示例数字 (".digit0")。可以看出，我试图在每个“数字”图像对周围放置间距，并在包含“计数单元”的 div 上使用填充或边距。它不工作。 “.count-digit”上的“float: left”绕过了边距和填充设置。

我应该如何解决这个问题？我倾向于认为我需要杀死花车，但替代方案“显示:内联”会阻止 Sprite 显示。

更糟糕的是，虽然这些 Sprite 在 IE8 和 Chrome 上工作，但当我打开 IE8 兼容模式时它们并没有显示。我不确定那是什么。有什么想法吗？

Answer 1

float: left 属性不应忽略边距或填充。不过，我认为您应该为 .count-unit 类指定 float 。

.count-unit {
    margin: ...
    padding: ...
    float: left;
}

我这里试过了，好像没有什么问题:http://jsfiddle.net/QGZjn/1/