奇怪的边框放置

我发现了一些奇怪的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

奇怪的边框放置

回答

相关问题