Question

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

以下是此版本的工作版本：http://vetriscience.com/development/newlook/index2.html

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

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我设法看到我的问题是什么，所以我将发布作为所有问题的未来参考。如果你回过头看一下代码，你会发现这篇文章位于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技巧，可以让您在开发网站时更容易理解框宽。它呈现块级元素的宽度，这样如果设置width: someNumber;，则无论填充和边框宽度如何，它都会使框宽始终为。如果你没有上面的重置规则，你必须设置宽度分隔垫和边框的宽度。（例如，重置：width = width + pad + borderWidth，不重置：width = width - （pad - borderWidth）阅读更多：http://css-tricks.com/box-sizing/

显然，这在任何浏览器中都不起作用，但是当设置了box-sizing: border-box的一揽子规则时Firefox也不起作用 - 因此它将无法正常工作，因为盒子的宽度受此框大小规则的约束。要反击行为，必须在所有适用的样式中覆盖它，或者必须取下毯子样式，以便仅将其应用于要应用它的元素。

所以在这个例子中，我删除了毯子样式，转而只将它放在我想要的元素上，而不是放在所有东西上。问题解决了！它甚至可以在IE8中运行！

CSS：之前和：之后在slideToggle（）之后不显示伪元素;除了Firefox之外，所有浏览器都会触发

1 个答案: