Компас и пирог, кажется, не работают - PullRequest
Новая
       6

Компас и пирог, кажется, не работают

1 голос
/ 22 ноября 2011

Я использую Компас для создания стилей CSS веб-страницы.Я хочу использовать функции CSS3, такие как border-radius и linear-gradient, но Internet Explorer отказывается сотрудничать.

Я кодировал это так: 

$pie-behavior: url("../stylesheets/PIE.htc");
// I've tried 'stylesheets/PIE.htc' and '/pink/stylesheets/PIE.htc' (all webpage is in folder 'pink').
$pie-base-class: pie-base;

.pie-base {
  @include pie-element(relative);
}

body {
  @include pie;
  @include background(
      image-url('header_background.png') no-repeat top center,
      linear-gradient(top center,
        $bg-gradient-start, $bg-gradient-stop
      ) no-repeat,
      image-url('wavy-white.jpg')
    );
}

Что с ним не так?

Ответы [ 4 ]

3 голосов
/ 26 ноября 2011

Моя методология тестирования будет такой:

1 / Найден ли PIE.htc IE? Документация PIE гласит:

Примечание: этот путь относится к просматриваемому файлу HTML, а не к файлу CSS, из которого он вызывается.

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

<body><div>
  <img src="stylesheets/yourtestimage.png" alt="If you can read this, it failed" width="400" height="400">
</div></body>

ЗатемУбедитесь, что этот каталог хороший или нет:)

2 / Затем попробуйте простое правило CSS без кода Compass, чтобы избежать проблем, которые могут быть вызваны Compass ине включая пирог.Пример: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>PIE and border-radius</title>
    <style type="text/css">
    p {
        width: 400px;
        height: 100px;
        line-height: 100px;
        vertical-align: middle;
        text-align: center;
        color: yellow;
        background-color: darkgreen;
        border-radius: 5px 6px 7px 8px;
        pie-border-radius: 30px; /* shouldn't be necessary but just in case ... Please test with and without this prefixed property */
        behavior: url(***/PIE.htc);
    </style>
</head>
<body>
    <p>this paragraph should be rounded in lesser IE</p>
</body>
</html>

3 / Добавьте другие инструкции CSS3 одну за другой, все еще в CSS без кода Compass.background не будет проанализирован PIE, вы должны использовать -pie-background (не уверен, что ваш компас сгенерирует это?).Сначала простой линейный градиент без кратного фона: 

p {
  /* (...) */
  -pie-background: linear-gradient(#F44, #400); /*PIE*/
  /* (...) */
}

Затем множественный фон: 

p {
  /* (...) */
  -pie-background: url(***/small_or_transparent_image1.png) left top no-repeat,
                   url(***/repeating_image2.png) left top repeat,
                   darkgreen;
  /* (...) */
}

и, наконец, микс: 

p {
  /* (...) */
  -pie-background: url(***/small_or_transparent_image1.png) left top no-repeat,
                   linear-gradient(#F44, #400),
                   darkgreen;
  /* (...) */
}

Кстати, вашmultibackground успешно отображается в браузерах Firefox и webkit с -moz-linear-Gradient и так далее?Генератор от Colorzilla может помочь вам со всеми этими префиксами (и для следующего шага с Compass он поддерживает его формат через «switch to scss», если вы еще не знали).

4 / Затем добавьте переменные и код scss в ваш файл Compass.Я не могу вам помочь, я использую LESS или простой CSS.Вы должны проверить сгенерированный CSS по вашему коду Compass: генерирует ли последний CSS, который вы намеревались сгенерировать?

1 голос
/ 01 декабря 2011

Я обнаружил, что с cssPIE сложно работать. Когда я его настроил, я использовал реализацию js вместо реализации htc: 

<!--[if lte IE 8 ]>
  <script src="/js/libs/PIE.js" type="text/javascript"></script>
<![endif]-->

Вот мой пример из реального мира: http://www2.highpoint.edu/

0 голосов
/ 30 ноября 2011

Я обнаружил, что cssPIE не понимает rgba значений, поэтому моя идея сделать градиент от цветного к прозрачному не должна работать: / Также IE не понимает встроенный SVG в стилях CSS, поэтому даже эта функция не 'т работает.Поэтому единственный способ - создать другой стиль для IE и удалить градиенты из всех градиентных элементов: /

0 голосов
/ 24 ноября 2011

Вы пытались добавить правильный тип MIME в свой .htaccess?Вот так: 

AddType text/x-component htc
...