我正在设计一个页面。我的预期结果是在 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”,它会显示在准确的位置......
为什么这个在调试时工作正常但在正常情况下却不行..??????
我已经把我的脑袋放在这几个小时了.....不知道该怎么做..... 请帮助我摆脱困境....
提前致谢。
问候, 红酒
最佳答案
如果我对你的理解是正确的——我会建议对那个箭头使用类似这样的东西——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;
}
关于css - 定位仅在 Debug模式下有效,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27123731/