CSS3pie 支持答案

【问题标题】：Css3pie supportCSS3pie 支持
【发布时间】：2011-12-07 06:44:16
【问题描述】：

我正在使用 cs3pie，但遇到了一些问题。它正在工作，但不是border-radius 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>

【问题讨论】：

标签： html css css3pie

【解决方案1】：

CSS3PIE 仅支持简写符号。

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

对于 PIE 解析的所有 CSS 属性，只有简写版本这些属性将被识别。例如，虽然支持border-radius，单独的速记 border-top-left-radius 等属性没有。

原因与 URL 未相对解析的原因相同到 CSS 文件（见上文）：PIE 无法查看位置每个样式属性都来自。如果同时存在速记和存在速记属性时，PIE 无法确定 CSS作者指定了那些属性，也无法确定每个属性的选择器的特异性。因此不能就应该优先考虑哪个属性做出明智的决定。

为避免做出愚蠢的猜测，我们选择仅支持速记特性。选择速记而不是速记以保持文件较小并避免繁琐的重复。

【讨论】：

【解决方案2】：

这对于优化 CSS 并不是真正需要的，但理论上按字母排序的属性对于解析器来说会更相似。除了如果您想进行一些更改，您将更快地找到您正在寻找的属性。

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

另外，如规范所述，使用 input[type="submit"] 代替 input[type=submit]。

【讨论】：