强制Chrome将按钮大小设置为固定大小，而不是小数
强制Chrome将按钮大小设置为固定大小，而不是小数
提问于 2017-04-18 07:57:09
我添加了一个简单的按钮，如下所示：<input type="button" value="test" />
问题是Chrome使用小数来计算按钮的大小。这是测试按钮的jsFiddle和盒子模型测量值。
出现问题的原因是，当您动态隐藏一个高度为15.333px的按钮，并将其替换为固定高度为15px的div时，容器将收缩0.333px，并给页面带来一点视觉上的推动。
有没有办法强制Chrome在所有测量中都使用固定的数字？
回答 2
Stack Overflow用户
回答已采纳
发布于 2017-04-18 09:31:40
我使用的是Chrome，但它不会生成十进制数。但是，如果你有问题，为什么不直接通过CSS覆盖Chrome的默认大小呢？然后，如果你把按钮换成相同高度的div，你就会有一个无缝的视觉体验。下面是一个例子：
input[type=button]{
line-height: 25px;
width: 50px;
height: 25px;
margin: 0;
padding: 0;
}默认大小将始终不一致。这取决于浏览器、可用的系统字体等。最好是用你自己的代码覆盖默认的样式，并使用web字体来确保用户获得一致的体验。
Stack Overflow用户
发布于 2017-04-18 13:43:15
好吧，老实说，经过一些摆弄之后，我不知道为什么chrome的按钮会有这样的行为，但是你总是可以切换到你自己的自定义按钮，这需要你用一些东西来更新border属性。我也不能让chrome的默认按钮的高度不同于它们的默认高度。
// 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");
}
});input[type=button] {
height: 25px;
border: none;
}
.buttonReplacement {
height: 25px;
background-color: cornflowerblue;
}
.hidden {
display: none;
}<input class="toggleMe" type="button" value="test" />
<div class="hidden toggleMe buttonReplacement">
test
</div>
<p>
<input type="button" value="replace" id="replace" />
</p>
但是这个基本的例子并不适合UI友好的按钮，所以你可能需要像这样添加:hover、:active和:focus效果：
// 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");
}
});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;
}<input class="toggleMe" type="button" value="test" />
<div class="hidden toggleMe buttonReplacement">
test
</div>
<p>
<input type="button" value="replace" id="replace" />
</p>
请注意，在用户交互按钮上，cursor: pointer是一个非常重要的属性。同样在:focus上，如果您想要丢弃大纲，还可以将outline属性更改为none。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/43461436
复制相关文章
相似问题
腾讯云开发者
