我一直在尝试复制一些 Material 设计按钮，但遇到了为创建“涟漪”效果而生成的 div 的问题。如果你去我的codepen https://codepen.io/AlexStiles/pen/oPomzX你会看到这个问题。
这是由 div 引起的(我尝试删除它并解决了问题)。我尝试添加各种属性，例如字体大小和行高，但都无济于事。有趣的是，根据您的浏览器，这个问题似乎有不同的影响。在 safari 上，宽度会大幅增加，然后会减小到 chrome 宽度。
"use strict";
const buttons = document.getElementsByTagName("button");
const overlay = document.getElementsByClassName("overlay");
const animationTime = 600;
for (let i = 0; i < buttons.length; i++) {
buttons[i].addEventListener("click", createRipple);
};
let circle = document.createElement("div");
function createRipple(e) {
this.appendChild(circle);
var d = Math.max(this.scrollWidth, this.scrollHeight);
circle.style.width = circle.style.height = d + "px";
circle.style.left = e.clientX - this.offsetLeft - d / 2 + "px";
circle.style.top = e.clientY - this.offsetTop - d / 2 + "px";
circle.classList.add("ripple");
// setTimeout(function(){
// for (let i = 0; i < circle.length; i++)
// document.getElementsByClassName("ripple")[i].remove();
// }, animationTime);
}button {
background-color: #4888f1;
border-radius: 24px;
display: flex;
align-items: center;
outline: 0;
border: 0;
padding: 10px 22px;
cursor: pointer;
overflow: hidden;
position: relative;
}
button .ripple {
position: absolute;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.5);
transform: scale(0);
animation: ripple 0.5s linear;
font-size: 0;
line-height: 0;
}
@keyframes ripple {
to {
transform: scale(2.5);
opacity: 0;
}
}
button img {
width: 20px;
height: 20px;
}
button *:not(:last-child) {
margin: 0 8px 0 0;
}
button span {
color: #fff;
font-family: Futura;
}
@media screen and (min-width: 1280px) {
button {
padding: 0.8vw 1.75vw;
border-radius: 1.9vw;
} button img {
width: 1.55vw;
height: auto;
} button span {
font-size: 0.8vw;
}
}<html>
<head>
<title>Material Design Components</title>
<link rel="stylesheet" href="style.css">
</head>
<button>
<span>Add to Cart</span>
</button>
<script src="js.js"></script>
</html>最佳答案
改变
button *:not(:last-child) {
margin: 0 8px 0 0;
}
为了，
button *:not(:last-child) {
margin: 0 0 0 0;
}
在 firefox 中检查。
关于javascript - 为什么点击这个按钮时会出现一个随机空格？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52233816/