Question

当我注意到宽度超过任何元素（甚至是html或正文）时，我正在制作一个css动画

一旦打开chrome dev工具，宽度就会消失，因此在打开开发工具后再刷新页面以再次查看宽度

HTML

<h1>bounce<h1>

CSS

h1 {
    font-family: monospace, sans-serif;
    font-size: 70px;
    font-weight: normal;
    text-align: center;
    animation: bounceIn .5s .5s linear 1 normal both;
}

@keyframes bounceIn {
    0% { opacity: 0; transform: scale(4); }
    30% { opacity: 1; }
    60% { transform: scale(.7); }
    80% { transform: scale(1.3); }
    100% { opacity: 1; transform: scale(1); }
}

Answer 1

这是因为标题的原始宽度非常大，并且chrome似乎不会更新动画结束时的计算宽度（它在safari上正确更新，并且可能是chrome中的错误）。当您调整窗口大小（开放开发工具将执行此操作）时，chrome会正确计算它。

要修复它，并且还要停止在所有浏览器上出现在动画开头的滚动条，请查看此编辑的JSFiddle

基本上，我已将标题包装到div中，并设置隐藏在div上的溢出：

<div class="bounce-container">
    <h1>bounce</h1>
</div>

.bounce-container {
    overflow: hidden;
}

Answer 2

嗨我在iphone版本6的iphone 5中遇到的这些类型的不寻常的额外空间

我们用过

body
 {
  overflow-x:hidden;
  width:100%;
  max-width:100%;
  min-width:100%;
}

即使overflow-x也能完成这项工作，但尝试使用它并获得安全添加宽度属性。

CSS - 不寻常的额外宽度

2 个答案: