css - 文本为空时 CSS 背景图像大小不起作用

Question

下面是我要显示的背景图像的 CSS。它用于我页面上的可拖动元素，以显示Drag handle用户拖动项目。

我的问题background-size: 16px 16px;也不width: 16px; heith: 16px;行。

如果我的内部没有文本，它将在页面上不显示任何内容<span> 我需要弄清楚如何使空的跨度标签具有我为此背景图像设置的宽度以显示？

http://codepen.io/jasondavis/pen/Hnyjf

HTML...

<div class="tools">

  <span class="handle"></span>

  <a href="#" class="collapse">-</a>

</div>

CSS...

.handle {
  cursor: move;
  position: relative;
  top: -4px;
  padding-top: 10px;
  width: 16px;
  height: 16px;
  background-size: 16px 16px;
  background-image:  
  url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIFdpbmRvd3MiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MzM3NDRFNERCMTFBMTFFMkE2QUJFMTNBNTEzQzEzMUUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MzM3NDRFNEVCMTFBMTFFMkE2QUJFMTNBNTEzQzEzMUUiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDozMzc0NEU0QkIxMUExMUUyQTZBQkUxM0E1MTNDMTMxRSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDozMzc0NEU0Q0IxMUExMUUyQTZBQkUxM0E1MTNDMTMxRSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PoCwBg8AAAAsSURBVHjaYqyurv7PAAGMUJooPhMDmYAFySQGNJPx8imycdSPo34kHQAEGACMAxGhnEmydQAAAABJRU5ErkJggg==);
}

Answer 1

因为空的内联元素没有任何宽度。您可以将元素设置为 inline-block 元素：

.handle {
  display: inline-block;
}