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のリファラーがロードされている場合、4つの画像へのアクセスをブロックします。開発者ツールの[ネットワーク]タブで応答を確認できます。画像を直接ロードした後（別のタブでURLを開く）、キャッシュされたバージョンが使用され、フィドルのデモで確認できます。403 Forbidden

ロードされていない画像の例

Chromeで機能する理由がわからない場合は、リファラーを送信しないように設定されている可能性があります。あなたの好みを見てください。

更新：このトピックに関するレポートを提出しました。

于 2012-08-04T22:20:37.773 に答える