不同浏览器的输入和锚标签的大小不同（额外填充）

Question

遇到恼人的问题：jsfiddle.net/f6juduq1

两个按钮，一个输入类型=“提交”，另一个 a 标记应该看起来相同：

HTML：

<a href="" class="button">I'm a button</a>
<br><br><br>
<input type="submit" class="button" value="I'm a button">

CSS：

.button {
    background: #257abc;
    border: none;
    display: inline-block;
    color: #fff;  
    font-size: 18px;
    font-family: Arial;
    text-align: center;
    text-decoration: none;
    padding: 10px 20px;
    min-width: 150px;
    cursor: pointer;
}

.button:hover,
.button:focus,
.button:active {
    text-decoration: underline;
}

input[type="submit"].button {
    box-sizing: content-box;
}

需要最后一行（ box-sizing ）才能达到相同的宽度。 （或最小宽度 - 按钮的宽度应灵活。）

现在问题：

Firefox 40

内框（使用Firebug检查第一个按钮并单击布局选项卡） 150 x 22px 。

第二个按钮： 150 x 24px 。为什么呢？

Chrome 45

第一个按钮（使用Chrome的开发人员工具进行检查）： 150 x 21px 。

第二个按钮： 150 x 21px 。好的，但它们与Firefox不同。为什么呢？

Internet Explorer 11

第一个按钮（使用IE的开发人员工具进行检查）： 150 x 20.7px 。

第二个按钮： 150 x 20.7px 。好的，但是“20.7”吧？为什么呢？

Safari 5.1.7

（无法检查jsfiddle的结果iframe。）

Opera 31

（与Chrome相同。）

从 Firefox 的结果中截取屏幕截图并在Photoshop中进行比较显示输入（第二个按钮）比标签高出2px（第一个按钮）：

在 Chrome 和 Safari 中，它看起来不错：

在 IE 中， a 标记高出1个像素。

现在最后一个问题是如何解决这个问题，或者更确切地说如何防止这些混乱的问题？

提前致谢！

Answer 1

这里非常有趣的观察。由于内置的​​CSS样式声明，该问题会影响高度和宽度，特别是在Mozilla Firefox中。

添加以下CSS应该可以修复高度和宽度差异。

public class NavDrawerListAdapter extends BaseAdapter{

private Context context;
private ArrayList<NavDrawerItem> navDrawerItems;

public NavDrawerListAdapter(Context context,
        ArrayList<NavDrawerItem> navDrawerItems) {
    this.context = context;
    this.navDrawerItems = navDrawerItems;
}

@Override
public int getCount() {
    return navDrawerItems.size();
}

@Override
public Object getItem(int position) {
    return navDrawerItems.get(position);
}

@Override
public long getItemId(int position) {
    return position;
}

@Override
public View getView(int position, View convertView, ViewGroup parent) {
    if (convertView == null) {
        LayoutInflater mInflater = (LayoutInflater) context
                .getSystemService(Activity.LAYOUT_INFLATER_SERVICE);
        convertView = mInflater.inflate(R.layout.drawer_list_item, null);
    }

    TextView txtTitle = (TextView) convertView.findViewById(R.id.title);

    txtTitle.setText(navDrawerItems.get(position).getTitle());

    return convertView;
}
}

这里的bug和修复的插图（注意，我已经取出了你的CSS样式的高度：

input::-moz-focus-inner { border:0; padding:0 }

html{font-family: Arial; font-size:0.8em;}
.wrapper {
  background: red;
  white-space: nowrap;
}
.button {
	background: #257abc;
	border: none;
	display: inline-block;
	color: #fff;
	font-size: 18px;
    font-family: Arial;
	text-align: center;
	text-decoration: none;
	padding: 10px 20px;
	min-width: 150px;
	cursor: pointer;
}

.button:hover,
.button:focus,
.button:active {
	text-decoration: underline;
}

input[type="submit"].button {
	box-sizing: content-box;
}

input.buttonfix::-moz-focus-inner {
  border:0;
  padding:0
}

在此处详细了解此问题：https://css-tricks.com/forums/topic/button-padding-issue/

Answer 2

要在所有浏览器中获得相同的高度，您需要指定高度 对于垂直对齐中心线高度与高度值相同

例如试试这个：

.button {
    background: #257abc;
    border: none;
    display: inline-block;
    color: #fff;
    font-size: 18px;
    font-family: Arial;
    text-align: center;
    text-decoration: none;
    min-width: 150px;
    cursor: pointer;
    padding: 0 20px;

    /* Adjust your height here */
    line-height: 35px;
    height: 35px;
}

Answer 3

我在 Safari 中遇到了 <a> 的大小与 <button> 不同的问题，这是由 SVG 图标按钮引起的。

SVG 的大小为 35 像素，并且锚和按钮标签的高度都明确设置为 35 像素。

问题是按钮比 Safari 中的锚点小。

我删除了按钮上的高度声明，它使按钮采用其中的 SVG 大小。