【发布时间】：2020-02-22 15:14:55
【问题描述】：
Chrome 和 Safari 上的input[type="submit"] 按钮在与border 属性结合使用时似乎只尊重line-height 属性。
在 Chrome 的调试器中查看计算得到的 line-height 值会显示带有边框的按钮具有预期的计算值，而没有边框的按钮具有 line-height: normal。
Firefox 显示尊重line-height 属性的两个版本。 Chrome 和 Safari 没有。
作为额外的奖励，将元素从 input[type="submit"] 更改为 button 可以让它们按预期工作。
任何想法为什么会发生这种情况？
CSS
.border { line-height: 3rem; border: solid 1px black; }
.noborder { line-height: 3rem; }
HTML
<input type="submit" class="border" value="input[type='submit'] with border" />
<input type="submit" class="noborder" value="input[type='submit'] without border" />
浏览器测试
- Firefox 73.0 - 按预期工作。
- Google Chrome 80.0.3987.106 - 意外结果。
- Safari 13.0.5 - 意外结果。
【问题讨论】：
-
您需要专门覆盖按钮样式才能使 Chrome 正常工作（不知道，关于 Safari）。看看this demo on w3schools。或者在线搜索“css 样式提交按钮”
-
然而，添加一个样式会导致不同的样式生效是没有意义的。在您发送的链接中，注释掉
border和background-color。仅显示较短按钮的轮廓。现在添加回background-color属性，按钮现在回到它们的填充驱动高度。看起来这个演示可以用来展示我所询问的行为。 -
您的意思是“已被服务”还是需要更多帮助？你的回复不清楚....
-
我需要帮助。我想了解观察到的行为是否是设计使然，为什么，或者是否是错误。这样，我们可以设计适当的解决方法，以及针对哪些浏览器。我感谢任何见解。
-
您的问题（和调查结果）已经暗示了“设计行为”。进行控制并创建自己的按钮样式（即使它看起来与 html 默认样式完全相同），这样您就不必检查每个浏览器的差异。
标签： html css google-chrome safari