不同浏览器的输入和锚标签大小不同（额外填充）
Different size for input and anchor tags across different browsers (extra padding)
以下烦人的问题：jsfiddle.net/f6juduq1
两个按钮，一个 input type="submit"，另一个 a 标签，看起来应该是一样的：
HTML:
<a href="" class="button">I'm a button</a>
<br><br><br>
<input type="submit" class="button" value="I'm a button">
CSS:
.button {
background: #257abc;
border: none;
display: inline-block;
color: #fff;
font-size: 18px;
font-family: Arial;
text-align: center;
text-decoration: none;
padding: 10px 20px;
min-width: 150px;
cursor: pointer;
}
.button:hover,
.button:focus,
.button:active {
text-decoration: underline;
}
input[type="submit"].button {
box-sizing: content-box;
}
需要最后一行(box-sizing)来实现相同的宽度。 （或最小宽度 - 按钮的宽度应灵活。）
现在的问题：
火狐 40
内框（使用 Firebug 检查第一个按钮并单击“布局”选项卡）为 150 x 22px。
第二个按钮：150 x 24px。为什么？
Chrome 45
第一个按钮（使用 Chrome 的开发者工具检查）：150 x 21px.
第二个按钮：150 x 21px。好的，但它们与 Firefox 不同。为什么？
Internet Explorer 11
第一个按钮（使用 IE 的开发人员工具检查）：150 x 20.7px。
第二个按钮：150 x 20.7px。好的，但是“20.7”是吧？为什么？
野生动物园 5.1.7
（无法检查 jsfiddle 的结果 iframe。）
歌剧 31
（与Chrome相同）
截取 Firefox 的结果并在 Photoshop 中进行比较显示输入（第二个按钮）比标签（第一个按钮）：
在 Chrome 和 Safari 中看起来不错：
在 IE 中 a 标签高 1px。
现在最后一个问题是如何解决这个问题，或者更确切地说，如何防止这些混乱的问题？
提前致谢！
要在所有浏览器中获得相同的高度，您需要指定高度
垂直对齐中心线高度与高度值相同
例如试试这个：
.button {
background: #257abc;
border: none;
display: inline-block;
color: #fff;
font-size: 18px;
font-family: Arial;
text-align: center;
text-decoration: none;
min-width: 150px;
cursor: pointer;
padding: 0 20px;
/* Adjust your height here */
line-height: 35px;
height: 35px;
}
这里的观察非常有趣。由于内置 CSS 样式声明，此问题影响高度和宽度，特别是在 Mozilla Firefox 中。
添加以下 CSS 应该可以修复高度和宽度差异。
input::-moz-focus-inner { border:0; padding:0 }
错误说明和修复（注意，我已经删除了你的 CSS 高度样式：
html{font-family: Arial; font-size:0.8em;}
.wrapper {
background: red;
white-space: nowrap;
}
.button {
background: #257abc;
border: none;
display: inline-block;
color: #fff;
font-size: 18px;
font-family: Arial;
text-align: center;
text-decoration: none;
padding: 10px 20px;
min-width: 150px;
cursor: pointer;
}
.button:hover,
.button:focus,
.button:active {
text-decoration: underline;
}
input[type="submit"].button {
box-sizing: content-box;
}
input.buttonfix::-moz-focus-inner {
border:0;
padding:0
}
NOTE: Use Firefox browser to see the issue.<br>
<div class="wrapper">
<a href="" class="button">I'm a button</a>
<input type="submit" class="button buttonfix" value="I'm a button">
<input type="submit" class="button" value="I'm a button">
</div>
Notice last button has extra height forcing the container to show top/bottom of other buttons
<br>
<br>Input Button - Fixed<br>
<input type="submit" class="button buttonfix" value="I'm a much longer button">
<br>A Tag - fine<br>
<a href="" class="button">I'm a much longer button</a>
<br>Input button - bug?<br>
<input type="submit" class="button" value="I'm a much longer button">
在此处详细了解该问题：https://css-tricks.com/forums/topic/button-padding-issue/
解决方案
基本上有三个问题:
- 不同的盒子长度
- 多个浏览器的不同默认设置
- Firefox CSS 差异
解决方法如下。
1。不同的盒子长度
标签比输入提交长：
要解决此问题，您必须将 box-sizing: content-box; 添加到输入的 CSS。从现在开始，（短）按钮看起来像：
2。多个浏览器的不同默认设置
由于不同的浏览器默认设置，按钮具有不同的高度：
输入（第二个）更高。
这里的解决方案：重置所有这些默认值。设置 line-height 和 height:
3。 Firefox CSS 差异
最后一个，Firefox 中的一个非常烦人的行为。
上面的按钮是相等的：相同的高度，相同的宽度。但如果按钮文本变长，您可能会看到：
输入键变宽了。这是因为 Firefox 在按钮元素中使用伪元素。要解决此问题，请重置 input::-moz-focus-inner:
的填充和边框
代码
这是一个示例：http://jsfiddle.net/f6juduq1/12/
CSS
.button {
background: #257abc;
border: none;
display: inline-block;
color: #fff;
font-size: 18px;
font-family: Arial;
text-align: center;
text-decoration: none;
padding: 10px 20px;
min-width: 150px;
cursor: pointer;
line-height: 1.5;
height: 27px; /* 18px x 1.5 = 27px */
}
input[type="submit"].button {
box-sizing: content-box;
}
input.button::-moz-focus-inner {
border:0;
padding:0;
}
谢谢大家的帮助。我希望这个答案简洁明了，以帮助其他人尽快找到解决方案。
我遇到的问题是 <a> 的大小仅在 Safari 中与 <button> 不同，这是由具有 SVG 图标按钮引起的。
SVG 的大小为 35 像素，锚标签和按钮标签都明确设置了 35 像素的高度。
问题是只有在 Safari 中按钮比锚点小。
我删除了按钮上的高度声明，它使按钮采用其中 SVG 的大小。
以下烦人的问题：jsfiddle.net/f6juduq1
两个按钮，一个 input type="submit"，另一个 a 标签，看起来应该是一样的：
HTML:
<a href="" class="button">I'm a button</a>
<br><br><br>
<input type="submit" class="button" value="I'm a button">
CSS:
.button {
background: #257abc;
border: none;
display: inline-block;
color: #fff;
font-size: 18px;
font-family: Arial;
text-align: center;
text-decoration: none;
padding: 10px 20px;
min-width: 150px;
cursor: pointer;
}
.button:hover,
.button:focus,
.button:active {
text-decoration: underline;
}
input[type="submit"].button {
box-sizing: content-box;
}
需要最后一行(box-sizing)来实现相同的宽度。 （或最小宽度 - 按钮的宽度应灵活。）
现在的问题：
火狐 40
内框（使用 Firebug 检查第一个按钮并单击“布局”选项卡）为 150 x 22px。
第二个按钮：150 x 24px。为什么？
Chrome 45
第一个按钮（使用 Chrome 的开发者工具检查）：150 x 21px.
第二个按钮：150 x 21px。好的，但它们与 Firefox 不同。为什么？
Internet Explorer 11
第一个按钮（使用 IE 的开发人员工具检查）：150 x 20.7px。
第二个按钮：150 x 20.7px。好的，但是“20.7”是吧？为什么？
野生动物园 5.1.7
（无法检查 jsfiddle 的结果 iframe。）
歌剧 31
（与Chrome相同）
截取 Firefox 的结果并在 Photoshop 中进行比较显示输入（第二个按钮）比标签（第一个按钮）：
在 Chrome 和 Safari 中看起来不错：
在 IE 中 a 标签高 1px。
现在最后一个问题是如何解决这个问题，或者更确切地说，如何防止这些混乱的问题？
提前致谢！
要在所有浏览器中获得相同的高度，您需要指定高度 垂直对齐中心线高度与高度值相同
例如试试这个：
.button {
background: #257abc;
border: none;
display: inline-block;
color: #fff;
font-size: 18px;
font-family: Arial;
text-align: center;
text-decoration: none;
min-width: 150px;
cursor: pointer;
padding: 0 20px;
/* Adjust your height here */
line-height: 35px;
height: 35px;
}
这里的观察非常有趣。由于内置 CSS 样式声明，此问题影响高度和宽度，特别是在 Mozilla Firefox 中。
添加以下 CSS 应该可以修复高度和宽度差异。
input::-moz-focus-inner { border:0; padding:0 }
错误说明和修复（注意，我已经删除了你的 CSS 高度样式：
html{font-family: Arial; font-size:0.8em;}
.wrapper {
background: red;
white-space: nowrap;
}
.button {
background: #257abc;
border: none;
display: inline-block;
color: #fff;
font-size: 18px;
font-family: Arial;
text-align: center;
text-decoration: none;
padding: 10px 20px;
min-width: 150px;
cursor: pointer;
}
.button:hover,
.button:focus,
.button:active {
text-decoration: underline;
}
input[type="submit"].button {
box-sizing: content-box;
}
input.buttonfix::-moz-focus-inner {
border:0;
padding:0
}
NOTE: Use Firefox browser to see the issue.<br>
<div class="wrapper">
<a href="" class="button">I'm a button</a>
<input type="submit" class="button buttonfix" value="I'm a button">
<input type="submit" class="button" value="I'm a button">
</div>
Notice last button has extra height forcing the container to show top/bottom of other buttons
<br>
<br>Input Button - Fixed<br>
<input type="submit" class="button buttonfix" value="I'm a much longer button">
<br>A Tag - fine<br>
<a href="" class="button">I'm a much longer button</a>
<br>Input button - bug?<br>
<input type="submit" class="button" value="I'm a much longer button">
在此处详细了解该问题：https://css-tricks.com/forums/topic/button-padding-issue/
解决方案
基本上有三个问题:
- 不同的盒子长度
- 多个浏览器的不同默认设置
- Firefox CSS 差异
解决方法如下。
1。不同的盒子长度
标签比输入提交长：
要解决此问题，您必须将 box-sizing: content-box; 添加到输入的 CSS。从现在开始，（短）按钮看起来像：
2。多个浏览器的不同默认设置
由于不同的浏览器默认设置，按钮具有不同的高度：
输入（第二个）更高。
这里的解决方案：重置所有这些默认值。设置 line-height 和 height:
3。 Firefox CSS 差异
最后一个，Firefox 中的一个非常烦人的行为。 上面的按钮是相等的：相同的高度，相同的宽度。但如果按钮文本变长，您可能会看到：
输入键变宽了。这是因为 Firefox 在按钮元素中使用伪元素。要解决此问题，请重置 input::-moz-focus-inner:
代码
这是一个示例：http://jsfiddle.net/f6juduq1/12/
CSS
.button {
background: #257abc;
border: none;
display: inline-block;
color: #fff;
font-size: 18px;
font-family: Arial;
text-align: center;
text-decoration: none;
padding: 10px 20px;
min-width: 150px;
cursor: pointer;
line-height: 1.5;
height: 27px; /* 18px x 1.5 = 27px */
}
input[type="submit"].button {
box-sizing: content-box;
}
input.button::-moz-focus-inner {
border:0;
padding:0;
}
谢谢大家的帮助。我希望这个答案简洁明了，以帮助其他人尽快找到解决方案。
我遇到的问题是 <a> 的大小仅在 Safari 中与 <button> 不同，这是由具有 SVG 图标按钮引起的。
SVG 的大小为 35 像素，锚标签和按钮标签都明确设置了 35 像素的高度。
问题是只有在 Safari 中按钮比锚点小。
我删除了按钮上的高度声明，它使按钮采用其中 SVG 的大小。