3

我正在按照本教程创建带有图标的 CSS 3 按钮。但是本教程中的问题图标高度取决于font-size. 如果我增加文本的字体大小，图标很适合，但如果我尝试减小字体大小，它不适合。我使用的图像是 40x30

a.button {
  background-image: -moz-linear-gradient(top, #ffffff, #dbdbdb);
  background-image: -webkit-gradient(linear,left top,left bottom,
      color-stop(0, #ffffff),color-stop(1, #dbdbdb));
  filter: progid:DXImageTransform.Microsoft.gradient
      (startColorStr='#ffffff', EndColorStr='#dbdbdb');
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient
      (startColorStr='#ffffff', EndColorStr='#dbdbdb')";
  border: 1px solid #fff;
  -moz-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4);
  -webkit-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4);
  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4);
  border-radius: 2px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  padding: 5px 5px;
  text-decoration: none;
  text-shadow: #fff 0 1px 0;
  float: left;
  margin-right: 15px;
  margin-bottom: 15px;
  display: block;
  color: #597390;
  line-height: 38px;
  font-size: 15px;
  font-weight: bold;
}
a.button:hover {
  background-image: -moz-linear-gradient(top, #ffffff, #eeeeee);
  background-image: -webkit-gradient(linear,left top,left bottom,
      color-stop(0, #ffffff),color-stop(1, #eeeeee));
  filter: progid:DXImageTransform.Microsoft.gradient
      (startColorStr='#ffffff', EndColorStr='#eeeeee');
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient
      (startColorStr='#ffffff', EndColorStr='#eeeeee')";
  color: #000;
  display: block;
}
a.button:active {
  background-image: -moz-linear-gradient(top, #dbdbdb, #ffffff);
  background-image: -webkit-gradient(linear,left top,left bottom,
      color-stop(0, #dbdbdb),color-stop(1, #ffffff));
  filter: progid:DXImageTransform.Microsoft.gradient
      (startColorStr='#dbdbdb', EndColorStr='#ffffff');
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient
      (startColorStr='#dbdbdb', EndColorStr='#ffffff')";
  text-shadow: 0px -1px 0 rgba(255, 255, 255, 0.5);
  margin-top: 1px;
}
a.button {
  border: 1px solid #979797;
}
a.button.icon {
  padding-left: 11px;

}

a.button.icon span{
  padding-left: 48px;
  display: block;
  background: url(../img/gmail2.png) no-repeat;
}
4

2 回答 2

2

你的陈述有点模棱两可，没有问题，但我会采取行动。

在这种情况下，font-size总是会起一个小因素，因为它将决定图标的高度。在某些时候，您将需要了解有关按钮大小的一些详细信息，但它不必受字体的影响。如果您设置按钮height，img{ height:100%; }图像将缩放以适合该区域。

<div id="container">
    <h1><img src="http://placedog.com/50/50" alt="" />Button</h1>
</div>

结合

#container{
    border: 2px solid black;
    width: 200px;
    height: 20px;
}
#container img{
    height:100%;
}

应该给你一些接近你正在寻找的东西。我已经制作了一个小的jsfiddle来演示实现此目的的一种方法。

于 2013-02-01T03:25:37.693 回答
1

如果您可以共享您的代码，那将会很有帮助。
在您提供的链接的css3 按钮示例中，如果我减小字体大小并设置以下 CSS 样式，则可以。

span { display: block; }

span是将文本包装在按钮内的标记。

于 2013-02-01T03:03:48.527 回答