选择器无法从 Chrome 正确转换为 Firefox 和 Safari

Question

完整解释

昨晚我正在复制我发现的一个有趣的代码笔。完成后，我对它的工作方式非常满意。因为我不打算在生产中使用它，所以我忽略了使用正确的 CSS 前缀来确保 cross-browser 兼容性。然而，当我决定在 Safari 和 Firefox 中检查它时，我注意到我的“:hover”事件没有正确翻译，到目前为止我无法修复它。我不需要这个项目来做任何事情，但我需要一些帮助来弄清楚为什么会发生这种情况，以便我可以准备好在未来的开发中解决这个问题。

直接问题

在 Firefox 和 Safari 中，当您将鼠标悬停在 "Fly-Out" 菜单右侧的菜单项上时 headers 它们会折叠，而在 Chrome 中它们会保持在外面。

我想强调，我理解为什么某些功能（如转换）不起作用，因为我没有为大多数功能指定 "webkit" 或 "moz" 前缀。只是折叠菜单让我很困扰。

代码

ul.sidebar {
  display: block;
  position: absolute;
  margin: 0;
  left: 0;
  height: 100%;
  width: 6.5em;
  background: #aa2266;
  padding: 0;
  text-align: center;
}
ul.sidebar * {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
ul.sidebar a {
  color: white;
  text-decoration: none;
  margin: 0;
  display: inline-block;
  width: 100%;
  height: 100%;
}
ul.sidebar a > i {
  margin-top: 0.13333em;
  font-size: 2em;
  display: block;
  margin-bottom: 0.2em;
}
ul.sidebar a > span {
  font-size: 0.8em;
  font-family: sans-serif;
}
ul.sidebar li {
  transition: background 0.3s;
  background: #aa2266;
}
ul.sidebar > li {
  margin: 0;
  padding: 0;
  height: 4em;
  display: inline-block;
  position: relative;
  width: 100%;
  background: #aa2266;
  transition: background 0.3s;
}
ul.sidebar > li:hover {
  background: #dc3278;
}
ul.sidebar > li:hover:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 100%;
  width: 6px;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.25) 0%, transparent 100%);
}
ul.sidebar > li > a {
  transition: background 0.3s;
}
ul.sidebar > li > a:hover {
  background: #ff5f87;
}
ul.sidebar > li > ul {
  overflow: hidden;
  height: 4em;
  padding: 0;
  position: absolute;
  z-index: -1;
  margin: 0;
  color: red;
  left: 100%;
  transition-delay: 0.3s;
  transition-property: transform;
  transition-duration: 0.6s;
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  width: auto;
  list-style: none;
  white-space: nowrap;
  top: 0;
  background: #dc3278;
}
ul.sidebar > li > ul > li {
  overflow: hidden;
  background: none;
  margin: 0 0px 0 -4px;
  padding: 0;
  display: inline-block;
  width: 6.5em;
  height: 4em;
  transition: background 0.3s;
}
ul.sidebar > li > ul > li:hover {
  background: #fa648c;
}
ul.sidebar li:hover > ul {
  -webkit-transform: translateX(0);
  transform: translateX(0);
}
ul.sidebar li:hover > ul > li {
  color: white;
}

body {
  padding: 0;
  position: fixed;
  margin: 0;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #450f30;
}

description {
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 0 0.4em 1em 0;
  color: white;
  font-size: 20px;
  font-family: times new roman;
}

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<description>
  Full Stack Developer
</description>



<ul class="sidebar">  
  <li>
    <a href="#">
      <i class="fa fa-home"></i> 
      <span>
    My Projects
      </span>
     
    </a>
    <ul>
       <li>
        <a>
          <i class="fa fa-question-circle"></i>
          <span>Nothing</span>
        </a>
        
      </li>
      <li>
        <a>
          <i class="fa fa-square"></i>
          <span>Boxes for all</span>
        </a>
      </li>
      <li>
        <a>
          <i class="fa fa-th-large"></i>
          <span>More boxes</span>
        </a>
      </li>
    </ul>
  </li>
  <li>
    <a>
      <i class="fa fa-info-circle"></i>
      <span>
      About
      </span>
    </a>
    
    <ul>
      <li>
        <a>
          <i class="fa fa-eye"></i>
          <span>I have eyes</span>
        </a>
        
      </li>
      <li>
        <a>
          <i class="fa fa-bed"></i>
          <span>and a bed</span>
        </a>
      </li>
      <li>
        <a>
          <i class="fa fa-heartbeat"></i>
          <span>plus cool icons</span>
        </a>
      </li>
     </ul>
  </li>
  <li>
    <a>
      <i class="fa fa-globe">
      </i>
      <span>
        Links
      </span>
    </a>
    <ul>
   <li>
        <a>
          <i class="fa fa-external-link"></i>
          <span>No Links</span>
        </a>
      </li>
      <li>
        <a>
          <i class="fa fa-fire"></i>
          <span>For the wicked</span>
        </a>
      </li>
     </ul>
  </li>
  <li>
  <a>
    <i class="fa fa-envelope-o"></i>
    <span>
    Contact
    </span>
  </a>
    <ul>
      <li>
        <a href="mailto:alec.menke@gmail.com">
          <i class="fa fa-user"></i>
          <span style="font-size: 8px;">alec.menke@gmail.com</span>
        </a>
        </li>
    </ul>
</li>
    </ul>

Code Pen

Answer 1

问题不在于转换和过渡的供应商前缀。问题是 z-index: -1 属性。根据定义，具有绝对位置的元素应该位于所有内联或相对定位的元素之上。 -1 的技巧起作用并将其放置在具有相对位置的父菜单元素下方。但是，在 Firefox 和 IE 中，它甚至被放置在主体下方，因此当鼠标悬停在下拉菜单上时，实际上悬停在主体上，即在父菜单 <li> 元素之外。

为了解决这个问题我做了以下修改：

在ul.sidebar > li > aclass中将z-index改为1，并在ul.sidebar > li > aclass中添加如下属性：

  position: absolute;
  left: 0;
  background: #aa2266;
  z-index: 1;

我已经在 Firefox 和 Internet Explorer 上检查了结果，现在它工作正常:)

ul.sidebar {
  display: block;
  position: absolute;
  margin: 0;
  left: 0;
  height: 100%;
  width: 6.5em;
  background: #aa2266;
  padding: 0;
  text-align: center;
}
ul.sidebar * {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
ul.sidebar a {
  color: white;
  text-decoration: none;
  margin: 0;
  display: inline-block;
  width: 100%;
  height: 100%;
}
ul.sidebar a > i {
  margin-top: 0.13333em;
  font-size: 2em;
  display: block;
  margin-bottom: 0.2em;
}
ul.sidebar a > span {
  font-size: 0.8em;
  font-family: sans-serif;
}
ul.sidebar li {
  transition: background 0.3s;
  background: #aa2266;
}
ul.sidebar > li {
  margin: 0;
  padding: 0;
  height: 4em;
  display: inline-block;
  position: relative;
  width: 100%;
  background: #aa2266;
  transition: background 0.3s;
}
ul.sidebar > li:hover {
  background: #dc3278;
}
ul.sidebar > li:hover:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 100%;
  width: 6px;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.25) 0%, transparent 100%);
}
ul.sidebar > li > a {
  position: absolute;
  left: 0;
  background: #aa2266;
  z-index: 1;  
  transition: background 0.3s;
}
ul.sidebar > li > a:hover {
  background: #ff5f87;
}
ul.sidebar > li > ul {
  overflow: hidden;
  height: 4em;
  padding: 0;
  position: absolute;
  z-index: 0;
  margin: 0;
  color: red;
  left: 100%;
  transition-delay: 0.3s;
  transition-property: transform;
  transition-duration: 0.6s;
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  width: auto;
  list-style: none;
  white-space: nowrap;
  top: 0;
  background: #dc3278;
}
ul.sidebar > li > ul > li {
  overflow: hidden;
  background: none;
  margin: 0 0px 0 -4px;
  padding: 0;
  display: inline-block;
  width: 6.5em;
  height: 4em;
  transition: background 0.3s;
}
ul.sidebar > li > ul > li:hover {
  background: #fa648c;
}
ul.sidebar li:hover > ul {
  -webkit-transform: translateX(0);
  transform: translateX(0);
}
ul.sidebar li:hover > ul > li {
  color: white;
}

body {
  padding: 0;
  position: fixed;
  margin: 0;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #450f30;
}

description {
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 0 0.4em 1em 0;
  color: white;
  font-size: 20px;
  font-family: times new roman;
}

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<description>
  Full Stack Developer
</description>



<ul class="sidebar">  
  <li>
    <a href="#">
      <i class="fa fa-home"></i> 
      <span>
    My Projects
      </span>
     
    </a>
    <ul>
       <li>
        <a>
          <i class="fa fa-question-circle"></i>
          <span>Nothing</span>
        </a>
        
      </li>
      <li>
        <a>
          <i class="fa fa-square"></i>
          <span>Boxes for all</span>
        </a>
      </li>
      <li>
        <a>
          <i class="fa fa-th-large"></i>
          <span>More boxes</span>
        </a>
      </li>
    </ul>
  </li>
  <li>
    <a>
      <i class="fa fa-info-circle"></i>
      <span>
      About
      </span>
    </a>
    
    <ul>
      <li>
        <a>
          <i class="fa fa-eye"></i>
          <span>I have eyes</span>
        </a>
        
      </li>
      <li>
        <a>
          <i class="fa fa-bed"></i>
          <span>and a bed</span>
        </a>
      </li>
      <li>
        <a>
          <i class="fa fa-heartbeat"></i>
          <span>plus cool icons</span>
        </a>
      </li>
     </ul>
  </li>
  <li>
    <a>
      <i class="fa fa-globe">
      </i>
      <span>
        Links
      </span>
    </a>
    <ul>
   <li>
        <a>
          <i class="fa fa-external-link"></i>
          <span>No Links</span>
        </a>
      </li>
      <li>
        <a>
          <i class="fa fa-fire"></i>
          <span>For the wicked</span>
        </a>
      </li>
     </ul>
  </li>
  <li>
  <a>
    <i class="fa fa-envelope-o"></i>
    <span>
    Contact
    </span>
  </a>
    <ul>
      <li>
        <a href="mailto:alec.menke@gmail.com">
          <i class="fa fa-user"></i>
          <span style="font-size: 8px;">alec.menke@gmail.com</span>
        </a>
        </li>
    </ul>
</li>
    </ul>

选择器无法从 Chrome 正确转换为 Firefox 和 Safari

Selectors fail to translate properly from Chrome to Firefox and Safari

css

cross-browser

hover

selector

compatibility

完整解释

直接问题

代码

Code Pen