时间戳

首页 > 解决方案 > 为什么 Firefox 和 Chrome 的 inline-block 的结果不同？

css - 为什么 Firefox 和 Chrome 的 inline-block 的结果不同？

问题描述

我将元素并排使用inline-block. 我想让元素之间的间隙为 2px，所以我为span元素设置了负边距。

* {
  margin: 0;
}

.content {
  width: 100%;
  min-width: 320px;
}

span {
  display: inline-block;
}

span {
  display: inline-block;
  width: 78px;
  padding: 3px 10px;
  cursor: pointer;
  background: #ddd;
  color: #777;
  margin-right: -2px;
  width: calc(25% - 22px);
}

span:hover {
  background: #eee;
}
<div class="content">
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
</div>

问题 1。它适用于 Firefox 64.0。但是，当使用 Google Chrome 71.0 检查时，最后一个span元素出现了。Firefox 和 Chrome 浏览器的默认字体大小为 16px。

此外，它在CodePen中运行良好，但在 stackoverflow 代码片段上无法正常运行。

为什么会出现这些问题？我已阅读以下问题，但似乎与此问题的原因无关。

Firefox 中的屏幕截图（CodePen 版本）：Firefox 中的屏幕截图（CodePen 版本） Firefox 中的屏幕截图（stackoverflow 的运行片段版本）：Firefox 的屏幕截图（stackoverflow 的运行片段版本） Google Chrome 中的屏幕截图：谷歌浏览器中的屏幕截图

问题 2。我设置width: 25%为使span元素全宽。但是，除非从 25% 中减去 22 px（在 Firefox 中），否则水平宽度不会变满。

如何计算 22px 的值？我不明白为什么(padding-left + padding-right)*4 - negative-margin = 22px，即使在每个元素中都设置了 padding-left和（总共 80 像素）。padding-right span

我已阅读以下问题，但似乎与此问题的原因无关。

标签： css

解决方案

推荐阅读