html – 位置：粘贴在Chrome 56中,但该元素是不可见的？

概述一旦我知道粘性CSS属性被最新的Chrome更新支持并得到支持,我感到非常高兴,但令我惊讶的是,该元素出于某种原因是隐形的？ 粘性非常好,元素在页面滚动时会保持预定义的位置,但由于某些奇怪的原因,元素完全不可见,所以是否有人对这种奇怪的行为有所了解？ See screen capture 我也注意到如果父DIV使用overflow：hidden属性(通常在页面包装器上),粘滞函数就会停止工作,这也 一旦我知道粘性CSS属性被最新的Chrome更新支持并得到支持,我感到非常高兴,但令我惊讶的是,该元素出于某种原因是隐形的？

粘性非常好,元素在页面滚动时会保持预定义的位置,但由于某些奇怪的原因,元素完全不可见,所以是否有人对这种奇怪的行为有所了解？

See screen capture

我也注意到如果父div使用overflow：hIDden属性(通常在页面包装器上),粘滞函数就会停止工作,这也是一种奇怪的行为,因为很多现代网站都使用可滚动的div,而且它们很可能也是为平板电脑和移动设备使用隐藏的抽屉菜单.

但这种消失的行为怎么样？

更新：

我在Codepen中复制了这个行为,这是一个与我的开发示例中使用的HTML和CSS相同的示例.

See codepen example

我没有包含所有CSS,只包括显示问题所需的内容,我已将问题钉在页脚的社交媒体菜单中,即如果我删除了图标(< i>< / i>)那个菜单,粘性侧边栏又出现了吗？

<div >    <ul >        <li ><a href=""  itemprop="sameAs" target="_blank"><i >Facebook</i></a></li>        <li ><a href=""  itemprop="sameAs" target="_blank"><i >Twitter</i></a></li>        <li ><a href=""  itemprop="sameAs" target="_blank"><i >Google Plus</i></a></li>        <li ><a href=""  itemprop="sameAs" target="_blank"><i >Instagram</i></a></li>    </ul></div>

注意：

可以在Chrome版本56.0.2924.87(64位)中复制问题

但在Chrome版本57.0.2987.21 beta(64位)中完全正常

解决方法 好吧,由于某种原因,导致消失的粘性元素的图标中的文本缩进属性.

之前：

[class^="i-"],[class*=" i-"] { ... text-indent: -9999px; ... }

后：

[class^="i-"],[class*=" i-"] { ... text-indent: 9999px; ... }

将文本缩进从负变为正似乎使粘性元素再次出现.

这有点奇怪,因为整个页面都有图标,但只是页脚中的图标,导致了这个问题？

更新：

正文缩进文本缩进：9999px;在Safari中引起了更多奇怪的问题,即将Web内容保存在适当位置的页面包装器,突然可以9999像素水平滚动.

任何知道如何保持负文本缩进文本缩进的人：-9999px;,并且仍然得到一个粘性元素位置：sticky;在Chrome中可见？

解：

啊,发现了这个问题,这既令人着迷又令人沮丧:)

文本缩进文本缩进的组合：-9999px;和白色空间白色空间：nowrap;在图标的属性中,由于某种原因导致水平滚动(Safari)和不可见粘性元素(Chrome)的问题.

之前：

[class^="i-"],[class*=" i-"] { ... text-indent: -9999px; white-space: nowrap; ... }

后：

[class^="i-"],[class*=" i-"] { ... text-indent: -9999px; white-space: nowrap; overflow: hIDden; ... }

现在一切都表现得应有尽有.

总结

以上是内存溢出为你收集整理的html – 位置：粘贴在Chrome 56中,但该元素是不可见的？全部内容，希望文章能够帮你解决html – 位置：粘贴在Chrome 56中,但该元素是不可见的？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。