html – 将相同的样式应用于和标签会导致不同的布局

2019年8月4日 228次阅读

参见英文答案 >
How to style button inputs to be identical in Chrome and Firefox?                                    4个

我有一个用于样式按钮的CSS类.当我将它应用于< input>和< a>标签,< a>比< input>小一点.在Firefox(33)中会出现此问题,但在Chrome(38)中它看起来很好.

这是一个最小的例子：

.my-button {
  display: inline-block;
  padding: 1em;
        
  border-radius: 0.2em;
  border: 1px solid #000;
        
  line-height: 1em;
  font-size: 13px;
  text-decoration: none;
    
  background-color: #ccc;
  color: #000;
}
<input class="my-button" type="submit" value="Save">
<a class="my-button" href="#">Cancel</a>

你也可以在这里看到它：http://jsfiddle.net/tr4vbrha/4/

最佳答案 这是因为字体不同而发生的. Windows上的输入是Microsoft Sans Serif,而在标签中是Times New Roman.

要解决此问题,请将font-family属性添加到my-button类.

点赞