输入的默认样式以某种方式弄乱了设计

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属性。 默认情况下，输入元素使用边框调整大小（未将边距+边距添加到高度），div使用内容框调整大小（已将边距+宽度添加到高度）。 但是，此属性仅是IE8 +。

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

我的第一个想法是用一些额外的填充来解决此问题-尽管我必须承认按钮内文本的垂直对齐方式很奇怪-不知道为什么它与底部对齐-如果有人可以解释的话会很好。