2

最近、次の Web サイトにアクセスしました: CSS メニュー サンプル

一番下にあるページメソッドが気に入りました：

**ページ**

これまでに見つけたものを追加しましたが、正しく表示されません (特に IE で)

ファイアフォックス:

ファイアフォックス

いいえ:

IE

ここに私の JSFiddle があります: JSFiddle

HTML:

<div class="navmeta">
    <div class='wp-pagenavi'>
        <span class='pages'>Page 1 of 48</span><span class='current'>1</span><a href='http://www.cssmenusamples.com/page/2' class='page larger'>2</a><a href='http://www.cssmenusamples.com/page/3' class='page larger'>3</a><a href='http://www.cssmenusamples.com/page/4' class='page larger'>4</a><a href="http://www.cssmenusamples.com/page/2" class="nextpostslink">&raquo;</a><a href='http://www.cssmenusamples.com/page/10' class='larger page'>10</a><a href='http://www.cssmenusamples.com/page/20' class='larger page'>20</a><span class='extend'>...</span><a href='http://www.cssmenusamples.com/page/48' class='last'>Last &raquo;</a>
    </div>
</div>

CSS:

.wp-pagenavi{
    margin-left:auto !important;
    margin-right:auto !important;
}
.navmeta {
    clear:both;
    margin-top:30px;
    top:30px;
    padding:30px 0;
    padding-right:180px;
    text-align:right;
    padding-bottom:40px;


}
.wp-pagenavi a {
    padding: 8px;
    text-decoration: none;
    background: url(images/navi.gif) no-repeat center center;
    height:25px;
    color:#FFFFFF;
    width: 25px;
    border: 1px solid #000;
}
.navmeta .current {
    color:#FFFFFF;
}
.wp-pagenavi {
    padding: 10px 20px 10 !important;
    display:block !important;
    clear:both !important;
}
.wp-pagenavi a ,.wp-pagenavi span.pages, .wp-pagenavi span.extend {
        color:#333333 !important;
        text-shadow:0px 1px #F6F6F6 !important;
        padding:6px 9px 6px 9px !important;
        border:solid 1px #B6B6B6 !important;
        box-shadow:0px 1px #EFEFEF !important;
        -moz-box-shadow:0px 1px #EFEFEF !important;
        -webkit-box-shadow:0px 1px #EFEFEF !important;
        background:#E6E6E6 !important;
        background:-moz-linear-gradient(top,#FFFFFF 1px,#F3F3F3 1px,#E6E6E6) !important;
        background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#FFFFFF),color-stop(0.02,#F3F3F3),color-stop(1,#E6E6E6)) !important;
        font-size:12px !important;
        margin-right:3px !important;
        text-decoration:none !important;
}   
.wp-pagenavi a:hover {
        color:#fff !important;
        text-shadow:0px 1px #4E802C !important;
        border-color:#478223 !important;
        background:#599F2F !important;
        background:-moz-linear-gradient(top,#9FE355 1px,#79BF4A 1px,#599F2F) !important;
        background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#9FE355),color-stop(0.02,#79BF4A),color-stop(1,#599F2F)) !important;
        color:#FFFFFF !important;
        box-shadow:0px 1px #E7E7E7 !important;
        -moz-box-shadow:0px 1px #E7E7E7 !important;
        -webkit-box-shadow:0px 1px #E7E7E7 !important;

}
 .wp-pagenavi span.current{
        padding:6px 9px 6px 9px !important;
        border:solid 1px #DCDCDC !important;
        color:#fff !important;
        box-shadow:0px 1px #E7E7E7 !important;
        -moz-box-shadow:0px 1px #E7E7E7 !important;
        -webkit-box-shadow:0px 1px #E7E7E7 !important;
        margin-right:3px !important;
        text-shadow:0px 1px #4E802C !important;
        border-color:#478223 !important;
        background:#599F2F !important;
        background:-moz-linear-gradient(top,#9FE355 1px,#79BF4A 1px,#599F2F) !important;
        background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#9FE355),color-stop(0.02,#79BF4A),color-stop(1,#599F2F)) !important;
}
4

2 に答える 2

2

-moz- と -webkit- のプレフィックスがあるため、IE では機能しませんが、IE をサポートするコードはありません。このサイトにアクセスしてグラデーションを選択すると、IE のコードを含むすべてのコードが表示されます。

于 2013-06-18T20:09:21.783 に答える
1

CSS が冗長です。これは、ほぼ 1 つのクラスで実現できます。

!important Everywhere は役に立たないので、必要な理由がわからない場合は使用しないでください。:)

すべてを同じ行に設定するには: vertical-align:を使用します: inline-element の場合は問題ありません。

行の高さと少しのパディングでサイズを指定すると、あとはテキストが行います。

IE と古いブラウザの場合は a を宣言しbackground-color、グラデーションの場合は として宣言しますbackground-image。

http://jsfiddle.net/u7YHE/ 

    .navmeta {
    margin:40px auto;
    display:table;
}
.page.current {
    background: url(images/navi.gif) no-repeat center center;
    color:#FFFFFF;
    border:solid 1px #DCDCDC;
    box-shadow:0px 1px #E7E7E7;
    background-color:#599F2F;
    background:-moz-linear-gradient(top, #9FE355 1px, #79BF4A 1px, #599F2F) !important;
    background:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0.02, #9FE355), color-stop(0.02, #79BF4A), color-stop(1, #599F2F));
    background:linear-gradient(top, #9FE355 1px, #79BF4A 1px, #599F2F);
    border-color:#478223;
}
.page {
    display:inline-block;
    vertical-align:top;
    color:#333333;
    text-shadow:0px 1px #F6F6F6;
    padding: 0.5em 1em;
    border:solid 1px #B6B6B6;
    box-shadow:0px 1px #EFEFEF;
    background:#E6E6E6;
    background:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0.02, #FFFFFF), color-stop(0.02, #F3F3F3), color-stop(1, #E6E6E6));
    background:linear-gradient(top, #FFFFFF 1px, #F3F3F3 1px, #E6E6E6);
    font-size:12px;
    margin-right:3px;
    text-decoration:none;
}
a.page:hover {
    color:#fff;
    text-shadow:0px 1px #4E802C;
    border-color:#478223;
    background:#599F2F;
    background:-moz-linear-gradient(top, #9FE355 1px, #79BF4A 1px, #599F2F) !important;
    background:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0.02, #9FE355), color-stop(0.02, #79BF4A), color-stop(1, #599F2F));
    box-shadow:0px 1px #E7E7E7 !important;
}
于 2013-06-18T20:28:28.777 に答える