html - 如何将图像 Sprite 集成到表数据中？

Question

通过使用 Instand sprite我创建了自己的 Sprite 图像。

通过使用转发器控件，我设置了 <td>类等于 arg16

Private Sub cdcatalog_ItemDataBound(sender As Object, e As RepeaterItemEventArgs) Handles cdcatalog.ItemDataBound
    If (e.Item.ItemType = ListItemType.Item) Or (e.Item.ItemType = ListItemType.AlternatingItem) Then
        Dim Cell as HtmlTableCell = TryCast(e.Item.FindControl("img"), HtmlTableCell)
        Cell.Attributes.Add("class", "text-center sprite arg16")
    End If
End Sub

表格单元格<td id="img" runat="server" class=""></td>

.sprite { background: url('sprite.png') no-repeat top left;  } 
.sprite.arg16 { background-position: 0px 0px; width: 16px; height: 16px;  } 
.sprite.aus16 { background-position: 0px -26px; width: 16px; height: 16px;  } 
.sprite.bel16 { background-position: 0px -52px; width: 16px; height: 16px;  } 
.sprite.bra16 { background-position: 0px -78px; width: 16px; height: 16px;  } 
.sprite.chl16 { background-position: 0px -104px; width: 16px; height: 11px;  } 
.sprite.cyp16 { background-position: 0px -125px; width: 16px; height: 16px;  } 
.sprite.den16 { background-position: 0px -151px; width: 16px; height: 16px;  } 

但不幸的是我得到了以下结果

对于每个表格单元格。那我在这里做错了什么？“呈现的 css”是

   .sprite {
    background: url('sprite.png') no-repeat top left;
   }

   .sprite.arg16 {
    background-position: 0px 0px;
    width: 16px;
    height: 16px;
    }

我的 Sprite 是

Answer 1

您的表格单元格大于图像的大小。尝试确保单元格大小合适。我看不到您的所有代码，但我会在下面发布一些代码/ fiddle 。

这是其中一个工作: http://jsfiddle.net/AU7PQ/1/

这是一个无法正常工作的 jsfiddle: http://jsfiddle.net/AU7PQ/

区别在于第一个 fiddle 中表格单元格内的内容强制单元格大于 css 中指定的内容。

这将适用于您拥有的 CSS

<table>
    <tr>
        <td class="sprite arg16">
        </td>
    </tr>
</table>

这不会:

<table>
    <tr>
        <td class="sprite arg16">
            . <br />
            .
        </td>
    </tr>
</table>

因此，请检查以确保您的单元格没有被其中的内容强制变大。