Chrome精灵上的CSS精灵加载不一致

Question

我有一个CSS背景精灵（2倍大小），仅在Chrome上显示不一致。当我加载页面时，应该是一系列标志的内容如下所示：

现在，如果我使用safari或firefox，它会正确加载

如何解决这个奇怪的问题？

	.flag {  
    background: url("flags_2x.png") no-repeat; 
    display:inline-block; 
    background-size:18px 7800px; 
    width:18px; 
    height:18px;
  }


.flag-abkhazia-12 {
	width: 12px;
	height: 12px;
	background-position: 0 0;
}