2

我最近访问了这个网站：CSS Menu Samples

我喜欢他们位于底部的 pages 方法：

**页数**

我已经添加了到目前为止发现的内容，但没有正确显示（尤其是在 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

它不适用于 IE，因为您有 -moz- 和 -webkit- 的前缀，但您没有支持 IE 的代码。如果你去这个网站并选择你的渐变，它会给你所有的代码，包括 IE 的代码。

于 2013-06-18T20:09:21.783 回答
1

你的 CSS 是多余的。您几乎可以通过一个课程来实现这一目标。

!important 到处都是无用的，如果您不明白为什么需要它们，则不应使用它们。:)

要将所有内容设置在同一行：使用 vertical-align:对于 inline-element 就可以了。

用 line-height 和一些 padding 给出大小，剩下的就是 text 了。

对于 IE 和旧浏览器，声明为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 回答