2

私はcs3pieを使用していますが、いくつかの問題に直面しています。動作していますが、border-radius160の代わりに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>
4

2 に答える 2

1

CSS3PIEは、省略表記のみをサポートします。

http://css3pie.com/documentation/known-issues/#shorthandからの抜粋

PIEが解析するすべてのCSSプロパティについて、それらのプロパティの短縮バージョンのみが認識されます。たとえば、border-radiusはサポートされていますが、個々のlonghandborder-top-left-radiusなどのプロパティはサポートされていません。

この理由は、CSSファイルに対してURLが解決されないのと同じ理由です（上記を参照）。PIEには、各スタイルプロパティの取得元が表示されません。ショートハンドプロパティとロングハンドプロパティの両方が存在する場合、PIEは、CSS作成者がそれらのプロパティを指定した順序を判別することも、各プロパティのセレクターの特異性を判別することもできません。したがって、どのプロパティを優先するかについて、十分な情報に基づいて決定することはできません。

ばかげた推測を避けるために、省略形のプロパティのみをサポートすることを選択しました。ファイルサイズを小さく保ち、面倒な繰り返しを避けるために、ロングハンドよりもショートハンドが選択されました。

于 2012-01-25T05:49:44.923 に答える
0

これはCSSの最適化には実際には必要ありませんが、アルファベット順にソートされたプロパティは、理論的にはパーサーの方が似ています。ただし、変更を加えたい場合は、探している物件をすばやく見つけることができます。

また、色のRGBの記述方法にも一貫性があります。これは、大文字のものとそうでないものがあるためです。

また、仕様が言うようにinput[type=submit]使用する代わりに。input[type="submit"]

于 2011-12-07T11:11:01.643 に答える