在Chrome和Safari中出现-moz- -webkit- -o-错误

时间:2015-11-12 08:35:55

标签: css google-chrome magento safari webkit

我在我的电子商务网站上使用magento,并且我尝试从此网站设置滑块面板:https://codyhouse.co/gem/css-slide-in-panel/

我在这2个浏览器上遇到的问题是滑块位于网站的某些部分之下。一开始我认为这是z-index问题,但它不是,在Chrome控制台中它跨越了所有的webkit和moz.It在Mozilla中工作得很好任何人都可以帮忙吗?

1 个答案:

答案 0 :(得分:0)

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

在您的情况下,很可能不再需要前缀,因为它们完全内置于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);
}
<div></div>

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

  • 检查所有元素的z-index
  • 确保此代码位于屏幕底部
  • 使用chrome元素选择器查看哪些元素重叠以及为什么