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

时间：2015-02-07 19:35:01

标签： css cross-browser hover selector compatibility

Unabridged说明

昨晚我正在努力复制我发现的一个有趣的Codepen。完成之后，我对它的工作方式非常满意。由于我没有计划在生产中使用它，我忽略了使用适当的CSS前缀来确保跨浏览器的兼容性。但是，当我决定在Safari和Firefox中检查它时，我注意到我的＆＃34;：hover＆＃34;事件没有正确翻译，到目前为止我一直无法修复它。我不需要这个项目，但我想帮助弄清楚为什么会这样，所以我可以准备在未来的发展中解决这个问题。

直接问题

在Firefox和Safari中，当您将鼠标悬停在＆＃34; Fly-Out＆＃34;右侧的菜单项上时它们崩溃的菜单标题，而在Chrome中它们仍然存在。

我想强调的是，我理解为什么像过渡这样的某些功能不起作用，因为我没有指定＆＃34; webkit＆＃34;或＆＃34; moz＆＃34;大多数人的前缀。这简直就是崩溃的菜单让我烦恼。

代码

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

Code Pen

1 个答案:

答案 0 :(得分：2)

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

为了解决这个问题，我做了改动：

在ul.sidebar > li > a类中将z-index更改为1，并将以下属性添加到ul.sidebar > li > a类：

  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>

相关问题
最新问题