Chrome 和 Safari 中的 -moz- -webkit- -o- 出现故障答案

【问题标题】：Fault with -moz- -webkit- -o- in Chrome and SafariChrome 和 Safari 中的 -moz- -webkit- -o- 出现故障
【发布时间】：2015-11-12 08:35:55
【问题描述】：

我正在为我的电子商务网站使用 magento，我正在尝试从该网站设置一个滑块面板：https://codyhouse.co/gem/css-slide-in-panel/。

我在这 2 个浏览器上遇到的问题是滑块位于网站的某些部分下方。一开始我以为是z-index问题，但不是，在chrome控制台中它跨越了所有的webkit和moz。它在Mozilla中工作得很好。有人能帮忙吗？

【问题讨论】：

标签： css google-chrome magento safari webkit

【解决方案1】：

它会删除所有带前缀的属性的原因是因为它们不是必需的或不再受支持。

在您的情况下，前缀很可能不再需要，因为它们完全内置在 CSS 中。

例如，box-shadow 在成为内置元素之前需要一个前缀。

Browser  -  Prefix  -  Un-prefixed
----------------------------------
Chrome   -   1.0    -     10.0 
Firefox  -   3.5    -      4.0
Safari   -   3.0    -      5.1

如果您在 Chrome 检查器或 Firebug 中查看以下演示，您会看到前缀版本已被注释掉，因为它们不再需要。

div {
  width: 200px;
  height: 200px;
  -webkit-box-shadow: 0 0 5px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0 0 5px 0px rgba(0, 0, 0, 0.75);
  box-shadow: 0 0 5px 0px rgba(0, 0, 0, 0.75);
}

&lt;div&gt;&lt;/div&gt;

就您的问题而言，我猜这个问题是元素堆叠问题。

检查所有元素的z-index
确保此代码位于屏幕底部
使用 chrome 元素选择器查看覆盖的元素及其原因

【讨论】：

我不得不说你是对的，但是我的标题中有面板按钮。我把它放在标题的底部，它覆盖了标题，但它在网站的主要内容后面，知道如何克服这个问题吗？
就像我说的，把它放在所有东西的下面。如果您不能这样做，则将position: relative; 添加到主要内容并确保z-index 在滑动面板下方。
非常感谢，我已将触发面板的按钮留在页眉中，并将所有其余部分一直移动到页脚，效果很好。再次感谢您