css - 定位仅在 Debug模式下有效

Question

我正在设计一个页面。我的预期结果是在 div 底部放置一个箭头类的东西，例如

HTML代码: <b aria-hidden="true" role="presentation" id="barrow" tabindex="-1"><bdo></bdo></b>

CSS 代码:
{
#barrow{border: 5px solid #585858;
border-top: 15px solid #E1B531;
position: absolute;
bottom: 68px;
border-bottom: 0;
margin-left: 61px;
}

问题是它不是我提到的地方的完美位置。我在 div1 中包含了“#tag b”。当我启动代码时，箭头远离我的 div1。但是如果我选择“Inspect Element”，它会显示在准确的位置......

为什么这个在调试时工作正常但在正常情况下却不行..？？？？？？

我已经把我的脑袋放在这几个小时了.....不知道该怎么做.....请帮助我摆脱困境....

提前致谢。

问候，红酒

Answer 1

如果我对你的理解是正确的——我会建议对那个箭头使用类似这样的东西——http://www.cssarrowplease.com/

它将为您生成代码并消除您遇到的任何错误。

像这样:

.arrow_box {
position: relative;
background: #88b7d5;
border: 4px solid #c2e1f5;
}
.arrow_box:after, .arrow_box:before {
top: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrow_box:after {
border-color: rgba(136, 183, 213, 0);
border-top-color: #88b7d5;
border-width: 30px;
margin-left: -30px;
}
.arrow_box:before {
border-color: rgba(194, 225, 245, 0);
border-top-color: #c2e1f5;
border-width: 36px;
margin-left: -36px;
}