Css3pie支持

时间:2011-12-07 06:44:16

标签: html html5 css3 css3pie

我正在使用cs3pie并面临一些问题。它工作但不是边界半径160而是4。我该如何解决呢。

/* Buttons and button links */
    input[type=submit],
    .actions ul li a,
    .actions a {
        font-weight:normal;
        padding: 4px 8px;
        background:  #FDC00D; 
        background-image: -webkit-gradient(linear, left top, left bottom, from(#FDC00D), to(#F68C1E));
        background-image: -webkit-linear-gradient(top, #FDC00D, #F68C1E);
        background-image: -moz-linear-gradient(top, #FDC00D, #F68C1E);
        background-image: -ms-linear-gradient(top, #FDC00D, #F68C1E);
        background-image: -o-linear-gradient(top, #FDC00D, #F68C1E);
        background-image: linear-gradient(top, #FDC00D, #F68C1E);
        -pie-background: linear-gradient(#FDC00D, #F68C1E); /*PIE*/
        color:#333;
        border:1px solid #F69C1E;
        text-decoration: none;
        text-shadow: #ccc 0px 1px 0px;
        min-width: 0;
        -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0px 1px 1px rgba(0, 0, 0, 0.2);
        -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0px 1px 1px rgba(0, 0, 0, 0.2);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0px 1px 1px rgba(0, 0, 0, 0.2);
        -webkit-user-select: none;
        user-select: none;
    }
    .actions ul li a:hover,
    .actions a:hover {
        background:  #FDC00D; 
        border-color: #acacac;
        text-decoration: none;
    }
    input[type=submit]:active,
    .actions ul li a:active,
    .actions a:active {
        background: #F68C1E;
        background-image: -webkit-gradient(linear, left top, left bottom, from(#F68C1E), to(#FDC00D));
        background-image: -webkit-linear-gradient(top, #F68C1E,#FDC00D);
        background-image: -moz-linear-gradient(top, #F68C1E,#FDC00D);
        background-image: -ms-linear-gradient(top, #F68C1E,#FDC00D);
        background-image: -o-linear-gradient(top, #F68C1E,#FDC00D);
        background-image: linear-gradient(top, #F68C1E,#FDC00D);
        -pie-background: linear-gradient(#F68C1E,#FDC00D); /*PIE*/

        text-decoration: none;
    }

    input[type=submit],.actions a {
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        position:relative;
        z-index: 0;
    }

    /**  Actions  **/
    .actions ul {
        margin: 0;
        padding: 0;
    }
    .actions li {
        margin:0 0 0.5em 0;
        list-style-type: none;
        white-space: nowrap;
        padding: 0;
    }

    .actions ul li a {
        display: block;
        clear: both;    
        -webkit-border-top-right-radius: 161px;
        -webkit-border-bottom-right-radius: 161px;
        -moz-border-radius-topright: 161px;
        -moz-border-radius-bottomright: 161px;
        border-top-right-radius: 161px;
        border-bottom-right-radius: 161px;
        position:relative;
        z-index: 0;
    }

    .actions ul li a:before,.actions ul li a.highlight:hover:before {
        content: "\2665" ; 
        font-size: 18px;
        padding-right:3px;
        color: #16224C; 

    }

    .actions ul li a.highlight:before,.actions ul li a:hover:before {
       color: red; 

    }

    .actions ul.subcategory{
        margin-left:10px;
        display: none;
    }
    .actions ul.subcategory li a {}

这就是我使用派的方式

<script>
$(function() {
    if (window.PIE) {
        $('.actions ul li a, .actions a, input[type="submit"], .success,.message,.cake-error,p.error,.error-message').each(function() {
            PIE.attach(this);
        });
    }
});

</script>

2 个答案:

答案 0 :(得分:1)

CSS3PIE仅支持简写符号。

摘自http://css3pie.com/documentation/known-issues/#shorthand

  

对于PIE解析的所有CSS属性,只有速记版本   这些财产将被承认。例如,虽然   支持border-radius,个人手写   border-top-left-radius等属性不是。

     

原因与URL相对解析的原因相同   到CSS文件(见上文):PIE没有可见的地方   每个风格的属性来自。如果既有速记又有   目前的手写属性,PIE无法确定其中的顺序   CSS作者指定了那些属性,也无法确定   选择器对每个属性的特异性。因此不能   关于哪个属性应该优先做出明智的决定。

     

为了避免做出愚蠢的猜测,我们选择只支持速记   属性。选择速记来保持文件大小   并避免繁琐的重复。

答案 1 :(得分:0)

这对于优化CSS并不是真正需要的,但理论上按字母顺序排序的属性对于解析器来说更相似。除非您想进行一些更改,否则您将更快找到您正在寻找的财产。

在编写RGB颜色时也要保持一致,因为其中一些是大写的,而另一些则不是。

而不是input[type=submit]使用input[type="submit"]作为规范说明。