造型文字VS造型按钮

如果我的风格input那么高度影响文本输入不同，然后按钮。这是为什么？对此可以做些什么？（作为一个额外的，他们为什么不对齐？）造型文字VS造型按钮

enter image description here

<input type="text" value="foobar"/> 
<input type="button" value="foobar"/>

CSS：

body { 
    background: red; 
} 

input { 
    border: 0; 
    height: 20px; 
    padding: 10px; 
}

http://jsfiddle.net/clankill3r/sxbzav34/

来源

2014-10-06 clankill3r

查看由 “亚历克斯字符” 下的解决方案。您可以看到其他人对“为什么”的回答，这是因为浏览器将自己的样式应用于不同的元素类型。 CSS允许您覆盖它们，并且在没有显式指定样式覆盖的情况下，浏览器默认会发生，或者如果父代具有可推送的样式，则会从父容器继承。一个例子就是“行高”风格。 – 2014-10-06 22:09:42

在浏览器如类型的按钮输入预定义了一些HTML元素的样式。其中，这导致类型按钮的输入具有box-sizing: border-box。强制这是box-sizing: content-box，所以你的CSS看起来像：

body { 
    background: red; 
} 

input { 
    border: 0; 
    height: 20px; 
    padding: 10px; 
    box-sizing: content-box; 
}

来源

2014-10-06 22:06:36

我选择了这个作为接受的答案，但我建议阅读Alex Char的答案。 – clankill3r 2014-10-07 09:45:08

由于浏览器的默认样式的。给他们不同的课程和风格。

来源

2014-10-06 22:02:39

您可以为您的文本输入字段和输入按钮分配两个不同的类，然后相应地设置它们的样式，请检查：DEMO。

HTML：

<input class="text" type="text" value="foobar" /> 
<input class="button" type="button" value="foobar" />

CSS：

body { 
    background: red; 
} 
.text { 
    border: 0; 
    height: 20px; 
    padding: 10px; 
} 
.button { 
    border: 0px; 
    padding: 12px 12px 13px 12px; 
}

来源

2014-10-06 22:02:41

一种解决方案是设置line-height，而不是高度：

body { 
 
    background: red; 
 
} 
 
input { 
 
    border: 0; 
 
    line-height: 50px; 
 
    padding: 0 10px 0 10px; 
 
    height: 50px; 
 
}

<input type="text" value="foobar"/> 
 
<input type="button" value="foobar"/>

修复：在其他浏览器上测试后发现问题。您必须使用特定的paddingpadding: 0 10px;（顶部和底部必须为0）

来源

2014-10-06 22:05:05

奇怪的是，当我在沙箱中尝试时，它不起作用XD – 2014-10-06 22:05:49

感谢您再次发表评论，无需发表评论。 – 2014-10-06 22:09:35

我投了票，备案。我认为你们在这里提供了最好的解决方案。如果您将这些值保留为空，它们确实显示错误对齐。这绝对是一个非常奇怪的问题:) – 2014-10-06 22:11:17

每个浏览器都给出了输入特殊的样式。如果您查看Chrome开发人员工具并向下滚动一下，您会看到如下所示的内容。你必须通过添加类，或使用输入[类型=“按钮”]来覆盖那些样式：

input[type="button"], input[type="submit"], input[type="reset"], input[type="file"]::-webkit-file-upload-button, button { 
align-items: flex-start; 
text-align: center; 
cursor: default; 
color: buttontext; 
padding: 2px 6px 3px; 
border: 2px outset buttonface; 
border-image-source: initial; 
border-image-slice: initial; 
border-image-width: initial; 
border-image-outset: initial; 
border-image-repeat: initial; 
background-color: buttonface; 
box-sizing: border-box; 
}

来源

2014-10-06 22:06:03

大小不同，因为垂直填充不会被添加到该按钮的大小，但它被添加到文本框的大小。您可以使用height和line-height来设置文本的高度和垂直位置。

由于默认情况下它们具有不同的垂直对齐，因此对齐关闭。如果你指定一个垂直对齐，他们将自己平等对齐。

input { 
    vertical-align: bottom; 
    border: 0; 
    height: 40px; 
    line-height: 40px; 
    padding: 0 10px; 
}

演示：http://jsfiddle.net/Guffa/kx7wzufr/

来源

2014-10-06 22:08:22 Guffa

造型文字VS造型按钮

回答

相关问题