强制Chrome将按钮大小设置为固定而不是十进制

Question

我正在添加一个简单的按钮：<input type="button" value="test" />

问题是Chrome使用小数来计算按钮的大小。这是jsFiddle和测试按钮的盒子模型测量。

问题在于，当您动态隐藏高度为15.333像素的按钮并将其替换为固定高度为15像素的div时，容器会缩小0.333像素，并且会给页面带来一点视觉效果。

有没有办法强制Chrome使用固定数字进行所有测量？

Answer 1

我正在使用Chrome，但它不会生成十进制数字。但是，如果您遇到问题，为什么不通过CSS覆盖Chrome的默认大小？然后，如果您将按钮换成div（相同高度），您将获得无缝的视觉体验。这是一个例子：

input[type=button]{
  line-height: 25px;
  width: 50px;
  height: 25px;
  margin: 0;
  padding: 0;
}

默认大小调整始终不一致。这取决于浏览器，可用的系统字体等。使用您自己的代码覆盖默认样式并使用Web字体确保用户获得一致的体验始终是理想的。

Answer 2

好吧，经过一些小心翼翼的摆弄后，我不知道为什么chrome的按钮会按照他们的方式行事，但你总是可以切换到自己的自定义按钮，这需要你用某些东西更新border属性。我也无法使用chrome的默认按钮，使其具有与默认值不同的高度。

＆＃13;

＆＃13;

// WARNING ES2015 this won't work on older browsers
document.getElementById("replace").addEventListener("click", () => {
  for(let el of document.body.querySelectorAll(".toggleMe")) {
  	el.classList.toggle("hidden");
  }
});

＆＃13;

input[type=button] {
  height: 25px;
  border: none;
}

.buttonReplacement {
  height: 25px;
  background-color: cornflowerblue;
}

.hidden {
  display: none;
}

＆＃13;

<input class="toggleMe" type="button" value="test" />
<div class="hidden toggleMe buttonReplacement">
test
</div>
<p>
  <input type="button" value="replace" id="replace" />
</p>

＆＃13;

＆＃13;

＆＃13;

但是这个基本示例并不适用于界面友好的按钮，因此您可能需要添加:hover，:active和:focus效果，如下所示：

＆＃13;

＆＃13;

// WARNING ES2015 this won't work on older browsers
document.getElementById("replace").addEventListener("click", () => {
  for(let el of document.body.querySelectorAll(".toggleMe")) {
  	el.classList.toggle("hidden");
  }
});

＆＃13;

input[type=button] {
  height: 25px;
  background-color: white;
  border: 1px solid gray;
  border-radius: 3px;
  padding: 3px 8px;
  cursor: pointer;
}

input[type=button]:hover {
  background-color: #eee;
}

input[type=button]:active {
  background-color: #999;
  outline-offset: -1px;
}

input[type=button]:focus {
  outline: none;
}

.buttonReplacement {
  height: 25px;
  background-color: cornflowerblue;
}

.hidden {
  display: none;
}

＆＃13;

<input class="toggleMe" type="button" value="test" />
<div class="hidden toggleMe buttonReplacement">
test
</div>
<p>
  <input type="button" value="replace" id="replace" />
</p>

＆＃13;

＆＃13;

＆＃13;

请注意，在用户互动按钮上，cursor: pointer是一个非常重要的属性。同样在:focus上，如果您想放弃大纲，也可以将outline属性更改为无。