c# - 输入的默认样式不知何故搞乱了设计

Question

出于某种原因，ASP.NET mvc3 应用程序中输入的默认样式正在改变我的按钮的外观。

如果我将样式应用到普通的 div 或 actionlink 按钮看起来很好

当我将它应用到我的:

<input type="submit" value="create" class="universalbutton" />

按钮没有收到正确的尺寸，但它确实收到了颜色和背景颜色等。

知道为什么会这样吗？

//编辑按钮样式

    .universalbutton 
{
    border: 1px solid black;
    background-color: #3fa9f5;
    width: 100px;
    height: 20px;
    color: White;
    font-variant: small-caps;
    padding: 5px;
    text-transform: none;
    text-decoration: none;
    text-align: center;
    margin: 0px;
    display: block;
    float: left;
    margin-right: 5px;

}

Answer 1

如果问题只是高度 + 对齐方式，我建议您更改输入元素上的 box-sizing 属性。输入元素默认使用 border-box sizing(padding + margin 不添加到高度)，div 使用 content-box sizing(padding + width 添加到高度)。 不过，此属性仅适用于 IE8+。

http://jsfiddle.net/6AbBy/10/

我的第一个想法是用一些额外的填充来解决这个问题——尽管我必须承认按钮内文本的垂直对齐方式非常奇怪——不知道为什么它会对齐到底部——如果有人能解释一下就更好了那个。