Question

我在js中为我的音频元素创建了一个控制栏，并尝试使用css三角形设置播放按钮（类playPause）的样式。我的问题是三角形相对于其余的控制元素被提升了几个像素。好像它有margin-或padding-bottom，但控制台没有显示这样的东西，并且显式地将这些属性设置为0无效。

控件的添加如下：

$( this ).after(  
    '<div class="audio_controls_bar">\
        <span id="' + playPauseId + '" class="playPause" ></span>\
        <input id="' + seekSliderId + '" class="seekSlider" type="range" min="0" max="100" value="0" step="1">\
        <span id="' + timeTxtId + '"></span>\
        <span id="' + muteBtnId + '" class="mute" ></span>\
        <input id="' + volumeSliderId + '" class="volumeSlider" type="range" min="0" max="100" step="1">\
    </div>'
);

指示文本的范围为inline-block样式，并且还添加了以下样式：

playBtn.style.width = "0"; 
playBtn.style.height = "0"; 
playBtn.style.borderTop = "10px solid transparent";
playBtn.style.borderBottom = "10px solid transparent";
playBtn.style.borderLeft = "10px solid white";

如果未应用这些样式，则不会出现此类“碰撞”。

...值得一提的是，如果将文本添加到playPause范围，则该文本与其他元素的相对高度相同。

...也值得一提：div会产生相同的效果，但是，button元素具有相同（和相反）的问题，顶部是神秘的无法找到的填充。

知道这里发生了什么，以及如何解决它？

Answer 1

根据其他元素，将CSS三角形悬挂得更低或更高是很常见的。

例如：我制作了一个箭头并将其放在http://jsfiddle.net/xdqFk/上的文字之间我通过向底部边距添加2px来固定位置：margin: 0 6px 2px 6px;（右上角左下方）推动它。

在你的情况下，如果它更高，那么这样的负余量应该有效：

playBtn.style.width = "0"; 
playBtn.style.height = "0"; 
playBtn.style.borderTop = "10px solid transparent";
playBtn.style.borderRight = "10px solid transparent";
playBtn.style.borderBottom = "10px solid transparent";
playBtn.style.borderLeft = "10px solid white";
playBtn.style.marginBottom = "-5px"; // CHANGE THIS

相对于其他元素，css三角形“脱节”

1 个答案: