Mozilla 中意外的列间隙

Question

我使用 HTML、CSS 和 JavaScript 制作了一个简单的计算器。当我运行它在 Chrome 中时它在列之间没有间隙但是当我尝试在 Mozilla 中运行我看到列之间有一些间隙。为了解决问题，我使用了 column-gap: 0 和 -moz-column-gap: 0 但它没有用。你可以在这些图片中看到我在说什么：

在 Mozilla 中：

在Chrome中：

这是我的代码和风格：

.calculator {
  position: relative;
  display: grid;
}

.calculator .value {
  display: grid;
  grid-column: span 4;
  border: none;
  outline: none;
  padding: 10px;
  font-size: 18px;
  text-align: right;
  height: 100px;
  column-gap: 0;
  -moz-column-gap: 0;
  margin: 0;
}

.calculator span {
  display: grid;
  width: 75px;
  height: 75px;
  color: #fff;
  background-color: #0c2835;
  place-items: center;
  border: 1px solid rgba(0, 0, 0, .1);
  column-gap: 0;
  -moz-column-gap: 0;
  margin: 0;
}

<form name="calc" action="#" class="calculator">
  <input type="text" name="txt" readonly="" class="value">
  <span class="num clear" onclick="document.calc.txt.value = ''">c</span>
  <span class="num" onclick="document.calc.txt.value += '/'">/</span>
  <span class="num" onclick="document.calc.txt.value += '*'">*</span>
  <span class="num" onclick="document.calc.txt.value += '7'">7</span>
  <span class="num" onclick="document.calc.txt.value += '8'">8</span>
  <span class="num" onclick="document.calc.txt.value += '9'">9</span>
  <span class="num" onclick="document.calc.txt.value += '-'">-</span>
  <span class="num" onclick="document.calc.txt.value += '4'">4</span>
  <span class="num" onclick="document.calc.txt.value += '5'">5</span>
  <span class="num" onclick="document.calc.txt.value += '6'">6</span>
  <span class="num plus" onclick="document.calc.txt.value += '+'">+</span>
  <span class="num" onclick="document.calc.txt.value += '3'">3</span>
  <span class="num" onclick="document.calc.txt.value += '2'">2</span>
  <span class="num" onclick="document.calc.txt.value += '1'">1</span>
  <span class="num" onclick="document.calc.txt.value += '0'">0</span>
  <span class="num" onclick="document.calc.txt.value += '00'">00</span>
  <span class="num" onclick="document.calc.txt.value += '.'">.</span>
  <span class="num equal" onclick="document.calc.txt.value = eval(calc.txt.value); console.log(calc.txt.value)">=</span>
</form>

你有什么想法吗？

Answer 1

这是因为您没有为网格布局定义规则(grid-template-columns)。因此，您只有一个 4 列网格，因为您使用 grid-column: span 4; 作为其中一张网格卡。因此，每个 UA 都将不同的值应用于网格。 Mozilla 应用 repeat(4, 1fr) 这将导致差距。

添加：grid-template-columns: repeat(4, min-content);，该问题应该已解决。

.calculator {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, min-content);
}

.calculator .value {
  display: grid;
  grid-column: span 4;
  border: none;
  outline: none;
  padding: 10px;
  font-size: 18px;
  text-align: right;
  height: 100px;
  margin: 0;
}

.calculator span {
  display: grid;
  width: 75px;
  height: 75px;
  color: #fff;
  background-color: #0c2835;
  place-items: center;
  border: 1px solid rgba(0, 0, 0, .1);
  column-gap: 0;
  -moz-column-gap: 0;
  margin: 0;
}

<form name="calc" action="#" class="calculator">
  <input type="text" name="txt" readonly="" class="value">
  <span class="num clear" onclick="document.calc.txt.value = ''">c</span>
  <span class="num" onclick="document.calc.txt.value += '/'">/</span>
  <span class="num" onclick="document.calc.txt.value += '*'">*</span>
  <span class="num" onclick="document.calc.txt.value += '7'">7</span>
  <span class="num" onclick="document.calc.txt.value += '8'">8</span>
  <span class="num" onclick="document.calc.txt.value += '9'">9</span>
  <span class="num" onclick="document.calc.txt.value += '-'">-</span>
  <span class="num" onclick="document.calc.txt.value += '4'">4</span>
  <span class="num" onclick="document.calc.txt.value += '5'">5</span>
  <span class="num" onclick="document.calc.txt.value += '6'">6</span>
  <span class="num plus" onclick="document.calc.txt.value += '+'">+</span>
  <span class="num" onclick="document.calc.txt.value += '3'">3</span>
  <span class="num" onclick="document.calc.txt.value += '2'">2</span>
  <span class="num" onclick="document.calc.txt.value += '1'">1</span>
  <span class="num" onclick="document.calc.txt.value += '0'">0</span>
  <span class="num" onclick="document.calc.txt.value += '00'">00</span>
  <span class="num" onclick="document.calc.txt.value += '.'">.</span>
  <span class="num equal" onclick="document.calc.txt.value = eval(calc.txt.value); console.log(calc.txt.value)">=</span>
</form>

Mozilla 中意外的列间隙

Unexpected column gap in Mozilla

html

css

css-grid