我有一个 button
和一个 anchor tag
booth 使用相同的类,但由于某种原因按钮变大了。我在这里发现一个问题已经解决了,但它仍然比另一个问题大一点。
HTML:
<div class="item-actions">
<ul>
<li><a href="#" class="button"><i class="fa fa-trash"></i> Gravar</a></li>
<li><button type="submit" class="button"><i class="fa fa-trash"></i> Lixo</button></li>
</ul>
</div>
CSS:
.item-actions{
float: right;
}
.item-actions ul li{
display: inline-block;
}
.button {
background: #3a9665;
background-image: -webkit-linear-gradient(top, #3a9665, #2d7a51);
background-image: -moz-linear-gradient(top, #3a9665, #2d7a51);
background-image: -ms-linear-gradient(top, #3a9665, #2d7a51);
background-image: -o-linear-gradient(top, #3a9665, #2d7a51);
background-image: linear-gradient(to bottom, #3a9665, #2d7a51);
-webkit-border-radius: 2;
-moz-border-radius: 2;
border-radius: 2px;
font-family: Arial;
color: #ffffff;
font-size: 12px;
padding: 4px 12px 4px 12px;
border: solid #2d7a51 1px;
text-decoration: none;
}
.button:hover {
background: #2d7a51;
text-decoration: none;
}
Here I found a Solution所以我添加了这段 CSS:
button::-moz-focus-inner {
padding: 0;
border: 0
}
但是结果还是不是我想要的,你会发现下面的截图有些不同:
编辑:
我已经删除了 i 标签
,但问题仍然存在,所以这不是问题所在。
最佳答案
我可以在 Mac OS X 10.9.5 和 FireFox 版本 32.0.2 上重现该问题。添加line-height: 1em;
至 .button
当我在 FireFox 中测试它时似乎可以工作:
.button {
background: #3a9665;
background-image: -webkit-linear-gradient(top, #3a9665, #2d7a51);
background-image: -moz-linear-gradient(top, #3a9665, #2d7a51);
background-image: -ms-linear-gradient(top, #3a9665, #2d7a51);
background-image: -o-linear-gradient(top, #3a9665, #2d7a51);
background-image: linear-gradient(to bottom, #3a9665, #2d7a51);
-webkit-border-radius: 2;
-moz-border-radius: 2;
border-radius: 2px;
font-family: Arial;
color: #ffffff;
font-size: 12px;
line-height: 1em;
padding: 4px 12px 4px 12px;
border: solid #2d7a51 1px;
text-decoration: none;
}
我认为问题的原因来自 <button type="submit" class="button">
<a href="#" class="button">
时具有显式样式的标签没有:
<div class="item-actions">
<ul>
<li><a href="#" class="button"><i class="fa fa-trash"></i> Gravar</a></li>
<li><button type="submit" class="button"><i class="fa fa-trash"></i> Lixo</button></li>
</ul>
</div>
也可能是由于在 .button
中使用显式像素大小调整引起的与 font-size: 12px;
.我建议使用另一种方案来调整大小,例如 em
的甚至百分比。
关于html - Firefox 按钮变大,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26567346/