Поддержка 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 ответа

Решение

CSS3PIE поддерживает только сокращенную запись.

Выдержка из http://css3pie.com/documentation/known-issues/

Для всех свойств CSS, которые анализирует PIE, будут распознаваться только сокращенные версии этих свойств. Например, в то время как поддерживается border-radius, отдельные свойства long-border-top-left-radius и т.д. не поддерживаются.

Причиной этого является та же причина, по которой URL-адреса не разрешаются по отношению к файлу CSS (см. Выше): PIE не может видеть, откуда берется каждое свойство стиля. Если присутствует как сокращенное, так и сокращенное свойство, PIE не может определить порядок, в котором автор CSS указал эти свойства, а также не может определить специфичность селектора для каждого свойства. Поэтому он не может принять обоснованное решение о том, какое имущество должно иметь приоритет.

Чтобы не делать глупых предположений, мы решили поддерживать только сокращенные свойства. Сокращение было выбрано вместо сокращения, чтобы сохранить небольшой размер файла и избежать утомительного повторения.

Это не будет действительно необходимо для оптимизации вашего CSS, но отсортированные по алфавиту свойства теоретически будут более похожи для парсера. За исключением того, что, если вы хотите внести некоторые изменения, вы быстрее найдете нужную недвижимость.

Также будьте последовательны в том, как вы пишете свой RGB для цветов, потому что некоторые из них прописные, а другие нет.

Также вместо input[type=submit] использование input[type="submit"] как указано в спецификации

Другие вопросы по тегам