0

我试图弄清楚为什么这些选项卡除了我正在使用的最新版本的 Chrome (21) 之外没有显示。

我认为这可能与after标签有关，但这应该适用于大多数主要浏览器（IE8+），根据：quirksmode

CSS：

ul {
    list-type: none;
}

li {
    cursor: pointer;
    display: inline-block;
    max-height: 46px;
    padding: 14px 10px 0 14px;
    -moz-border-radius-topleft: 5px;
    -webkit-border-top-left-radius: 5px;      
    border-top-left-radius: 5px;
}

li.dark_green {
    background: url(http://i.imgur.com/49NPN.png) repeat-x;
    position: relative;
    color: #fff;
}

li.dark_green:after {
    background: url(http://i.imgur.com/ggxKy.png) repeat-x;
    content: " ";
    display: inline-block;
    width: 66px;
    position: relative;
    height: 46px;
    display: block;
    z-index: 400;
    left:50px;
    bottom:32px;
}

li.light_green {
    background: url(http://i.imgur.com/CRuk8.png) repeat-x;
    position: relative;
}

li.light_green::after {
    background: url(http://i.imgur.com/K7DAL.png) no-repeat;
    content: " ";
    display: inline-block;
    width: 66px;
    position: relative;
    height: 46px;
    display: block;
    z-index: 400;
    left:50px;
    bottom:32px;
}

.text {
    position: relative;
    left: 10px;
    z-index: 500;
}
.light_green_text {
    position: relative;
    left: 20px;
    z-index: 500;
}

HTML：

<ul>
    <li class="light_green"><span class="text">Symptoms</span></li>
    <li class="dark_green active"><span class="light_green_text">Problems</span></li>
    <li class="light_green"><span class="light_green_text">Behavior</span></li>
</ul>​
​

演示：

http://jsfiddle.net/someprimetime/6F4MC/7/

4

1 回答 1

0

http://imgur.com/阻止对您的四个图像的访问，当它们加载了http://fiddle.jshell.net的引用时。您可以在开发人员工具的网络选项卡中看到响应。直接加载图像后（在单独的选项卡中打开它们的 url），将使用缓存的版本，可以在您的小提琴演示中看到。403 Forbidden

未加载图像的示例

不确定为什么它在您的 Chrome 中有效，它可能被设置为不发送推荐人。看看你的喜好。

更新：我已经提交了关于这个主题的报告。

于 2012-08-04T22:20:37.773 回答