定位僅在調試模式下才能正常工作

我正在設計一個頁面。我預期的結果是把箭頭樣的事情底部的div像 enter image description here 定位僅在調試模式下才能正常工作

enter image description here 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。但是，如果我去「檢查元素」，它顯示在確切的位置.....

爲什麼一個工程良好的調試，但不正常.. ???????

我已經把我的頭在這幾小時.....唐;知道怎麼做..... 請幫我傢伙出來的....

謝謝提前。

問候，維諾

來源

2014-11-25 vinoth kumar

可以共享這個問題可見小提琴？無論如何，你是否嘗試過使用僞元素而不是使用空元素？ – fcalderan 2014-11-25 10:07:59

@FabrizioCalderan ...我編輯了 – 2014-11-25 10:21:03

你能用盡可能少的代碼重現問題嗎？這將幫助我們解決問題。您可以使用[jsfiddle.net]（http://jsfiddle.net/）或[jsbin.com]（http://jsbin.com/）等網站來顯示您的示例。 – 2014-11-25 10:25:01

如果我理解正確，你 - 我會建議使用這樣的事情對於箭頭 - 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; 
}

來源

2014-11-25 10:09:40 JHair

感謝隊友.......它解決了我的..... – 2014-11-25 11:47:12

定位僅在調試模式下才能正常工作

回答

相關問題