奇怪的邊框放置

我發現了一些奇怪的CSS錯誤。奇怪的邊框放置

我有一個<div>容器，裏面有一些文字和一個Font-Awesome圖標。 <div>容器的樣式使其具有小邊框。奇怪的是，似乎「認爲」<div>只是它實際的高度的一半。

這種情況只出現在Chrome移動（Android版），但無法在Chrome桌面（在Safari和合作沒有測試...）

HTML

<div class="sidebar"> 
    Lade Daten... <li class="fa fa-spin fa-spinner"></li> 
</div>

CSS

@media only screen and (max-width: 860px) 
{ 
    .sidebar { 
     position: relative; 
     width: auto; 
     margin: 0 20px; 
    } 
} 

.sidebar { 
    position: absolute; 
    background: rgb(255, 255, 255); 
    border-radius: 5px; 
    margin-left: 20px; 
    padding: 20px; 
    border: 1px solid rgba(0, 0, 0, 0.9); 
    width: 335px; 
    box-shadow: 2px 2px 5px; 
} 

body { 
    margin: 0; 
    background: rgb(60,60,60); 
    font-size: 16px; 
    font-family: 'Share Tech Mono', Arial; 
}

來源

2017-04-21 Jan Jaap

歡迎的StackOverflow，你的問題應該包含一個[**最小的，完整的和可驗證的實例**]（http://stackoverflow.com/help/mcve）。僅供參考，'li'應該在'ul'，'ol'或'menu'中使用。 – hungerstar

我無法重現您的問題：https：//jsfiddle.net/z9u4uL0h/。在你的情況下，我強烈建議遠程調試你的網站，這裏是一個關於遠程調試Android設備的好教程：https：//developers.google.com/web/tools/chrome-devtools/remote-debugging/ –

讓我看看。 ....也許'margin：0 20px;'與它有關或可能'width：auto;'。也許你可以試試'position：absolute;'。我不知道。這些建議中的任何一個對你有用嗎？ – NathanielSantley

-1

嘗試把height: (px you want it)在@media query

來源

2017-04-21 14:13:16

這是一個糟糕的解決方案。每次內容更改時，都必須手動更改「高度」值。到目前爲止，沒有什麼可以說這是糾正問題的唯一方法。還有一個很可能的問題，那就是用更靈活的東西來解決這個問題，即清理浮游物。 – hungerstar

奇怪的邊框放置

回答

相關問題