html – 在所有浏览器中使表单按钮/文本字段高度相同？

发布时间：2020-12-14 19:30:16 所属栏目：资源来源：网络整理

导读：我有以下css和html(详细介绍了这些要点),其他样式的完整代码可以在这里找到：我有这个CSS粘贴在jsfiddle： http://jsfiddle.net/BwhvX/上,但这足以重现问题) CSS： * { margin: 0px; padding: 0px; font-size: 13px; line-height: 15px; border: none;}input

我有以下css和html(详细介绍了这些要点),其他样式的完整代码可以在这里找到：我有这个CSS粘贴在jsfiddle： http://jsfiddle.net/BwhvX/上,但这足以重现问题)

CSS：

* {
    margin: 0px;
    padding: 0px;
    font-size: 13px;
    line-height: 15px;
    border: none;
}
input[type="submit"]::-moz-focus-inner {
    border: 0;
}

#search .text,#search .button {
   border: 1px solid red;
}

HTML：

<form method="post" id="search" action="">
    <p><input type="text" class="text" value="" name="suche"><input type="submit" class="button" value="Suchen"></p>
</form>

这是firefox呈现的方式：

这是Chrome渲染的方式：

我希望两个表单元素在所有浏览器中具有相同的高度.看起来像一些默认样式被应用,我手动需要重置像我在这个例子中为firefox.
在chrome开发工具中,一个高度为16,一个高度为17像素,但我无法看到它的来源,它刚刚计算出来.应用样式(向我显示)是相同的.

解决方法

更改：

*{
    line-height: normal !important;
}

或添加以下内容：

input[type="submit"],input[type="text"] {
    line-height:normal !important;
}

不要问为什么)

和.徒步旅行需要特殊的修复.但看起来不错

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!