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/

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

输入的默认样式以某种方式混淆了设计

1 个答案: