在 <a href 中转换 <input form>答案

【问题标题】：Convert a <input form> in a <a href在 <a href 中转换 <input form>
【发布时间】：2013-10-03 23:33:24
【问题描述】：

我的代码有

<input class="menu_button" type="submit" value="Log in">
<a href="register.php" class="menu_button">Register</a>

a href 在我的 css 中的样式非常完美，而 type = submit 的输入按钮却没有...

我该如何改变

变成a href？

这是一个 jsfiddle。

http://jsfiddle.net/26tyd/

查看按钮的外观有何不同。一个更高一点，另一个更小一点是完美的。请帮我弄清楚如何解决这个问题。

【问题讨论】：

请在问题中包含相关的 CSS。
它在 jsfiddle 上，而且 css 与问题无关
CSS 不是不相关的；这是问题的核心部分。基本问题是浏览器对这两个元素有不同的默认样式表，并且您没有覆盖所有这些默认值。所以我们需要看看你在覆盖什么。请注意，Stackoverflow 鼓励问题在问题中包含所有相关代码，即使它们也在单独的链接页面中，因为如果其他人将来搜索您的问题，则无法保证外部链接仍然有效。
表单输入在大多数浏览器中呈现不同，例如 Safari 输入看起来与 Chrome 完全不同。因此，如果您真的关心与<a /> 元素看起来相同的元素，那么我建议不要使用表单输入。在这种情况下，您可以创建另一个锚点作为您的提交按钮，并使用 JS 事件处理程序在单击表单时提交表单。

标签： css button input hyperlink href

【解决方案1】：

据我了解，您需要将两个元素的样式设置为相同？这是一个解决方案：

JSFIDDLE DEMO

.menu_button {
    -moz-box-shadow:inset 0px -1px 0px 0px #000000;
    -webkit-box-shadow:inset 0px -1px 0px 0px #000000;
    box-shadow:inset 0px -1px 0px 0px #000000;

    background-color:#000000;
    text-indent: 0;
    border: 1px solid #fa1e0f;
    display: inline-block;
    color: #fff;
    font: normal 12px/1 Arial;
    width: 58px;
    text-decoration: none;
    text-align: center;
    vertical-align: top;
    text-shadow: 1px 1px 0px #33302f;
    padding: 5px 0;
    ouotline: 0 none;
    margin: 0;
}
/*this is needed for firefox and buttons */
.menu_button::-moz-focus-inner { border: 0; padding: 0; outline: none; }

【讨论】：

【解决方案2】：

试试

margin: 0;
padding: 0;
white-space: normal;
box-sizing: content-box;

input 标签的样式在用户代理样式表中不同于a 标签。

【讨论】：

【解决方案3】：

您只需在代码中添加以下代码：

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

要调整高度，我建议您使用“最小宽度”和“填充”。因为给出“宽度”和“高度”会限制你的按钮，如果你有更多的测试或填充，高度和宽度不会让背景增加。

请查看更新后的代码：-

.menu_button {
   -moz-box-shadow:inset 0px -1px 0px 0px #000000;
    -webkit-box-shadow:inset 0px -1px 0px 0px #000000;
    box-shadow:inset 0px -1px 0px 0px #000000;
    background-color:#000000;
    -webkit-border-top-left-radius:0px;
    -moz-border-radius-topleft:0px;
    border-top-left-radius:0px;
    -webkit-border-top-right-radius:0px;
    -moz-border-radius-topright:0px;
    border-top-right-radius:0px;
    -webkit-border-bottom-right-radius:0px;
    -moz-border-radius-bottomright:0px;
    border-bottom-right-radius:0px;
    -webkit-border-bottom-left-radius:0px;
    -moz-border-radius-bottomleft:0px;
    border-bottom-left-radius:0px;
    text-indent:0;
    border:1px solid #fa1e0f;
    display:inline-block;
    color:#ffffff;
    font-family:Arial;
    font-size:12px;
    font-weight:normal;
    font-style:normal;
    text-decoration:none;
    text-align:center;
    text-shadow:1px 1px 0px #33302f;
    box-sizing: border-box; /*ADDED*/
    -moz-box-sizing: border-box; /*ADDED*/
    padding:5px;
}

希望这会有所帮助！

【讨论】：

也创建了一个小提琴供您参考：jsfiddle.net/aasthatuteja/7NFvH/1
抱歉错字:-(

【解决方案4】：

您应该使用内边距，而不是像当前那样使用高度和宽度，因为这样文本垂直居中。

未发送的原因是因为您当前没有使用表单，因此您需要在表单中所需的内容周围添加表单标签，以便您可以使用：

<form action='#' method='get'>
    <input class="menu_button" type="submit" value="Log in" />
</form>

这是一个有效的小提琴：

http://jsfiddle.net/Hive7/26tyd/3/

【讨论】：

另一种将文本垂直对齐到元素中间的方法是将line-height设置为元素的高度，然后设置vertical-align:middle。这仅适用于单行文本。
感谢所有贡献的人！这很有帮助

【解决方案5】：

将此添加到您的 CSS：

input[type=submit]{
    height: 22px;
    line-height: 18px;
    cursor: pointer;
}

【讨论】：