javascript - CSS :before and :after pseudo elements not displaying after slideToggle(); fires in all browsers but Firefox

Question

我目前正在创建一个子导航，它要求在页面左侧的一列中显示 7 个单独的图标。当您将鼠标悬停在这些元素中的任何一项上时，将触发 jQuery 函数 slideToggle() 并且一个 div 会在图标下方向下滑动。这个 div 有一个边框，上面有一个小箭头指向您当前鼠标悬停的图标。

这是它的工作版本:http://vetriscience.com/development/newlook/index2.html

如果您在 Windows 和 Mac 上的 Firefox 中查看此内容，则没有问题。向上的箭头显示正确。如果您在任何其他浏览器中查看此箭头，则不会显示该箭头。这个箭头是用 CSS 边框 :before 和 :after 技巧创建的。这是我正在使用的代码:

HTML:

<div id="conditions"><h2>Condition Specific</h2>
        <span class="box left"><a href="#" name="joint"><img src="images/JointHealth_Icon.png" height="97" border="0" /></a></span><span class="box right"><a href="" name="behavioral"><img src="images/BehavioralHealth_Icon.png" height="97" border="0" /></a></span>
        <div name="joint" class="expand EXleft joint">In addition to Glyco-Flex products, VetriScience offers formulations with single and multi-source glucosamine, hyaluronic acid and MSM.</div>
        <div name="behavioral" class="expand EXright behavioral">This is In addition to Glyco-Flex products, VetriScience offers formulations with single and multi-source glucosamine, hyaluronic acid and MSM. </div>
        <br style="clear: both;" />
        <span class="box left"><a href="#" name="everyday"><img src="images/EverydayHealth_Icon.png" height="97" border="0" /></a></span><span class="box right"><a href="" name="digestive"><img src="images/DigestiveHealth_Icon.png" height="97" border="0" /></a></span>
        <div name="everyday" class="expand EXleft">This is the text for Everyday Health. w0ot!</div>
        <div name="digestive" class="expand EXright">This is the text for Digestive health. Yum Yum!</div>
        <br style="clear: both;" />
        <span class="box left"><a href="#" name="system"><img src="images/SystemHealth_Icon.png" height="97" border="0" /></a></span><span class="box right"><a href="" name="immune"><img src="images/ImmuneHealth_Icon.png" height="97" border="0" /></a></span>
        <div name="system" class="expand EXleft">This is the text for System Health. Sorry I'm not actually sure what this covers.</div>
        <div name="immune" class="expand EXright">This is the text for Immune Health. Hooray for no cough cough or sneeze sneeze!</div>
        <br style="clear: both;" />
        <span class="box left"><a href="#" name="environmental"><img src="images/EnvironmentalHealth_Icon.png" height="111" border="0" /></a></span>
        <div name="environmental" class="expand EXleft">This is the text for System Health. Sorry I'm not actually sure what this covers.</div>
        <br style="clear: both;" />
    </div>

还有 CSS:

* {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    box-sizing: border-box; /* Opera/IE 8+ */
}
#conditions {
    position: relative;
    display: block;
    width: 250px;
    min-height: 400px;
    float: left;
    overflow: hidden;
    z-index: 4;
}
#conditions .box {
    position: relative;
    display: block;
    width: 100px;
    margin: 10px;
    text-align: center;
}
#conditions .left {
    float: left;
}
#conditions .right {
    float: right;
}
#conditions .box a {
    margin: 0px auto;
    text-align: center;
}
#conditions .expand {
    position: relative;
    display: block;
    float: left;
    font-family: AvenirLight, sans-serif;
    font-size: 10px;
    padding: 5px;
    z-index: 999;
}
#conditions .expand.EXleft {
    border-width: 1px;
    border-style: solid;
    border-color: #000;
}
#conditions .expand.EXleft:before {
    border-color: transparent transparent #000 transparent;
    position: absolute;
    top: -28px;
    left: 40px;
    border-width: 1px;
    border-style: solid;
    content: '';
    border-style: solid;
    border-width: 14px;
    width: 0;
    height: 0;
}
#conditions .expand.EXleft:after {
    content: '';
    position: absolute;
    top: -27px;
    left: 40px;
    border-color: transparent transparent white transparent;
    border-style: solid;
    border-width: 14px;
    width: 0;
    height: 0;
}
#conditions .expand.EXright {
    border-width: 1px;
    border-style: solid;
    border-color: #000;
}
#conditions .expand.EXright:before {
    content: '';
    border-color: transparent transparent #000 transparent;
    position: absolute;
    top: -28px;
    left: 175px;
    border-style: solid;
    border-width: 14px;
    width: 0;
    height: 0;
}
#conditions .expand.EXright:after {
    content: '';
    border-color: transparent transparent white transparent;
    position: absolute;
    top: -27px;
    left: 175px;
    border-style: solid;
    border-width: 14px;
    width: 0;
    height: 0;
}
/* Condition Specific Icons */
#conditions .expand.EXleft.joint {  /*Left*/ 
    border-color: #FF6B0B;
    z-index: 999;
}
#conditions .expand.EXleft.joint:before {
    border-color: transparent transparent #FF6B0B transparent;
}
#conditions .expand.EXleft.joint:after {
    position: absolute;
    top: -27px;
    left: 40px;
}
#conditions .expand.EXright.behavioral {  
    border-color: #FCB424;
}
#conditions .expand.EXright.behavioral:before {
    border-color: transparent transparent #FCB424 transparent;
    position: absolute;
    top: -28px;
    left: 175px;
}
#conditions .expand.EXright.behavioral:after {
    position: absolute;
    top: -27px;
    left: 175px;
}

我一直在研究父元素和目标元素的 z-index 值，试图看看这是否会改变任何东西，但遗憾的是，所有这些基本上都被忽略了。任何想法或帮助将不胜感激!

JSFiddle Demo

Answer 1

Annnnd 我设法看到我的问题是什么，所以我发帖作为 future 引用所有关于这个问题的信息。如果您返回代码，您会注意到 CSS 顶部的这段代码:

* {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    box-sizing: border-box; /* Opera/IE 8+ */
}

您可能知道，这是一个 CSS 技巧，可以在开发网站时使处理框宽度更容易理解。它呈现 block 级元素的宽度，这样，如果您设置 width: someNumber;，那么无论填充和边框宽度如何，它都会呈现框宽度始终为该宽度。如果你没有上面的重置规则，你必须设置宽度，将 pad 和 border 的宽度考虑在内。 (例如，重置:width = width + pad + borderWidth，不重置:width = width - (pad - borderWidth) 阅读更多:http://css-tricks.com/box-sizing/

显然，当设置了 box-sizing: border-box 的一揽子规则时，这在除 Firefox 之外的任何浏览器中都不起作用 - 因此它会使它无法作为框的宽度工作受此框大小规则的约束。为了解决这个问题，它要么必须在所有适用的样式中被覆盖，要么必须取下毯子样式以支持仅将其应用于您想要应用它的元素。

所以在这种情况下，我删除了毯子样式，以便只将它放在我想要的元素上，而不是放在所有元素上。问题已解决!它甚至可以在 IE8 中运行!