html - 如何使按钮看起来与其他元素相同，反之亦然

Question

在组装网站时，我发现让按钮与其他元素一起工作非常复杂，这样所有元素看起来都一样。
例如在菜单中会发生这种情况，其中一些按钮是真正的按钮，而其他按钮只是指向其他页面的 HTML 链接。其他示例可能是一个表单，其中的按钮预计与其他输入一样大。
请看my jsFiddle明白我在说什么。 在示例中，我希望按钮看起来像其他元素!
SO 请求后的一些代码:

HTML:

Both elements shole be of the same size
<div id="menulike">
    <button>DO SOMETHING</button>
    <a href="#something">GO TO SOMETHING</a>
</div>

CSS:

div#menulike button, div#menulike a {
    /*reset some default styles*/
    border-style: none;
    border-width: 0px;
    text-decoration: none;

    /*Inline or inline-block*/
    display: inline;
    display: inline-block;
    /*colors and stuff*/
    color: white;
    font-weight: bold;
    background: black;

    /*This is important - size is expected to be the same*/
    padding: 3px;
    margin: 1px;
    width: 220px;


    font-size: 12pt;
    text-align: center;
}

Answer 1

为什么会这样？

应用相同样式时元素看起来不一样的原因是元素上应用了默认样式。这是因为元素不同。差异也可能因浏览器而异。

如何解决这个问题？

您只需覆盖元素之间所有不同的属性。浏览器之间的很多差异都可以通过 CSS 重置来解决。

为什么我的示例不起作用？

关于您的特定问题，该按钮具有不同的宽度，因为您没有覆盖该按钮的所有 CSS 属性。尝试将以下内容添加到您的文本输入中:

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

这应该使它们具有相同的宽度。或者，您可以为按钮提供 box-sizing: content-box，这是大多数元素的默认值。

至于按钮和链接之间的区别，我只能看到将鼠标悬停在它们上方时的光标图标。这可以通过 cursor 属性来改变:

cursor: default;

编辑:

我刚刚注意到第二个示例在 Firefox 中按钮和链接的高度不同(我之前使用的是 Chrome，但没有显示)。我相信这是 height 和 box-sizing 的组合。将两个元素设置为相同的值应该使它们具有相同的大小。

我只是在猜测，但我认为在这种情况下需要 height 的原因是因为 FF 中按钮和链接之间的字体处理方式不同。由于未设置高度，即使字体大小相同，字体在两个元素中占用的空间量也不同。