1

在组装网站时，我发现让按钮与其他元素一起使用非常复杂，因此所有元素看起来都一样。
例如，在菜单中会发生这种情况，其中一些按钮是真正的按钮，而另一些只是指向其他页面的 HTML 链接。其他示例可能是表单，其中按钮应与其他输入一样大。
请参阅我的 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;
}
4

2 回答 2

1

为什么会这样？

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

你如何解决这个问题？

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

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

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

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

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

至于按钮和链接之间的区别，当您将鼠标悬停在它们上时，我所能看到的只是光标图标。这可以通过以下cursor属性进行更改：

cursor: default;

编辑：

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

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

于 2013-09-11T19:18:06.173 回答
0

我不确定，但表单元素（按钮、选择、单选按钮）是由浏览器提供的。每个浏览器/操作系统都有一种显示方式。所以我认为你需要为它写一个单独的css块。

于 2013-09-11T19:14:55.337 回答