在HTML中获取<input>按钮和<a>大小相等

Question

我在HTML/CSS中遇到了以下问题:对于我的(离线)网站,有一个链接和一个提交按钮(位于表单内),彼此相邻,如下所示:

<a href='settings.php' class='button'>Settings </a>

<form action='processing/logout.php' method='POST' class='inline'>
    <input type='submit' value='Sign out' class='redbutton'>
</form>

当两个元素都是链接时,它们就完美地排列在一起.然而,现在,即使链接和按钮具有与它们相关联的相同CSS样式,然后输入按钮比链接更令人烦恼(高度)(尽管在浏览时几乎看不到).

我创建了一个jsFiddle来演示.

其他论坛上的人要求重置CSS,所以我也将其包括在内,即使删除它也不能解决问题.

如何让链接和输入按钮达到相同的高度？我错过了一些明显的东西吗？是否有CSS技巧让它们达到相同的高度？

Answer 1

(内联)锚元素的大小在不同浏览器中处理不一致.

可靠的解决方案是在链接中放置一个按钮.小提琴:http://jsfiddle.net/m5m5M/22/.

<a href='settings.php'><input type='button' class='button' value='Settings' /></a><form action='processing/logout.php' method='POST' class='inline'><input type='submit' value='Sign out' class='redbutton'>
<form>

请注意,我在按钮之间省略了空格.这是因为当HTML中有任何空格时,内联元素会显示彼此之间的间隙.