Question

我目前正在为Chrome和Firefox浏览器开发屏幕截图扩展程序。我想有一个项目列表，其中图像位于下一个文本。

在Chrome浏览器中一切正常但在Firefox中我遇到了HTML / CSS问题。

渲染：

请注意，为了查看Firefox上的问题，我在元素上添加了边框样式。（我已经尝试将高度属性添加到我的div元素，但它不起作用）

如何解决此问题？

.container{
  width: 300px;
  margin: 5px;
}

.text-pointer{
  cursor: pointer;
  margin-bottom: 10px;
  margin-top: 10px;
}

.sprite {
    background-image: url(img/spritesheet.png);
    background-repeat: no-repeat;
}
.sprite-small{
    zoom:0.10;
    -moz-transform:scale(0.19);
    -moz-transform-origin: 0 0;
}

.sprite-align{
    display: inline-block;
    vertical-align: middle;
}

/* Example a sprite */
.sprite-screen {
    width: 128px;
    height: 128px;
    background-position: -5px -398px;
}

<body>
  <div class="container">
      <div class="text-pointer" style="border:1px solid red"><span class="sprite sprite-align sprite-small sprite-screen" style="border:1px solid blue"></span> Screenshot</div>
      <div class="text-pointer"><span class="sprite sprite-align sprite-small sprite-capture"></span> Capture Selection</div>
      <div class="text-pointer"><span class="sprite sprite-align sprite-small sprite-settings"></span> Settings</div>
      <div class="text-pointer"><span class="sprite sprite-align sprite-small sprite-info"></span> About</div>
  </div>
</body>

Chrome和Firefox之间Div差异的高度

0 个答案: