只有一小部分图像显示答案

【问题标题】：Only a small part of an image shows只有一小部分图像显示
【发布时间】：2014-02-12 21:35:13
【问题描述】：

所以我有两个图像作为工具栏上的按钮。由于某种我不知道的原因，只有一小部分图像仍然可见。如果我在这里错了，请纠正我，但我使用了一个按钮并将背景图像设置为我想要的图片。这是我的代码。任何帮助表示赞赏！

CSS：

button.openTS {
  float: right;
  background: url("/images/tslogo.png") no-repeat;
  cursor: pointer;
  border-width: 0px;
  margin-right: 20px;
  margin-left: 5px;
  width: 23px
}

  button.openIRC {
  float: right;
  background: url("/images/irclogo.png") no-repeat;
  cursor: pointer;
  border-width: 0px;
  margin-left: 20px;
  margin-right: 5px;
  width: 23px
}

div.toolbar {
  background-color: #D6D6D6;
  border-bottom-style: solid;
  border-bottom-width: 10px;
  border-bottom-color: #000000;
  border-left-style: solid;
  border-left-width: 10px;
  border-left-color: #000000;
  border-right-style: solid;
  border-right-width: 10px;
  border-right-color: #000000;
  border-radius: 15px;
  position: absolute;
  top: 0px;
  right: 0px
}

HTML：

<div class="toolbar">
    <h4 class="toolbar">Toolbar:</h4>
    <button onClick="TSappear(); IRCdisappear()" class="openTS"></button>
    <button onClick="IRCappear(); TSdisappear()" class="openIRC"></button>
</div> <!--This ends the Toolbar Div-->

这是正在发生的事情的图片：

如果我添加高度，就会发生这种情况：http://i.imgur.com/qNB9xAH.png

这是正常情况：http://i.imgur.com/whOACaH.png

【问题讨论】：

大概这是一个关于 HTML + CSS 的问题，但你的问题没有标记？
是的，我修复了我的标签，谢谢！
您忘记了width: 23px 后面的分号。您还可以添加 height 属性。缺少的height 可能是您的问题。
@EmanuelElliott 要在 StackOverflow 中显示代码块，您需要在每行之前有四个空格，并且在第一行代码之前还有一个空行
我们也可以有.toolbar 规则吗？我认为你的问题出在那儿......

标签： html css image button

【解决方案1】：

看起来你需要给你的.openIRC 班级一个高度。带有背景图像的元素不会像<img> 元素那样调整自身大小。因此，您的 .openIRC 项目只会将背景图像显示为其最高的子元素（可能是文本）。

Demo Fiddle: 举例说明我在说什么。

【讨论】：

谢谢！这就是问题所在！干杯！