定位仅在调试模式下有效

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; }

问题是它不是我所提到的地方的完美地方。我加入了＃34; #tag b＆＃34;在div1里面。当我启动代码时，箭头放在远离我的div1的位置。 但是，如果我选择＆＃34; Inspect Element＆＃34;，它会显示在准确位置.....

为什么一个在调试中运行良好但在正常情况下不正常.. ???????

我已经把头放了几个小时......不知道该怎么做..... 请帮助我们的人....

提前致谢。

此致 维诺

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;
}