Не могу заставить CSS3Pie работать - PullRequest
Новая
       55

Не могу заставить CSS3Pie работать

2 голосов
/ 07 февраля 2012

Я чувствую себя настолько глупо, будто мне не хватает чего-то действительно очевидного, но я все проверил и не могу понять, что не так. Я пытаюсь использовать CSS3pie, чтобы сделать закругленные углы в ie8, но это просто не займет.

У меня есть путь, настроенный относительно HTML-документа, а не CSS. Он находится в папке с именем pie, поэтому я использую это в CSS: 

#recommended-acc {
float: left;
width: 472px;
background: url(../img/cont_bg.png) repeat;
margin: 10px;
padding: 0 10px 6px 0;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
behavior: url(pie/PIE.htc);
border-radius: 5px;
border: 1px #d8d8d8 solid;
 }

Кто-нибудь знает больше о css3 pie, кто может посоветовать мне, что мне не хватает? Я пробовал это на множестве различных элементов, и это не сработало ни разу.

Ответы [ 5 ]

5 голосов
/ 09 февраля 2012

Несколько вещей, которые нужно попробовать:

  • Используйте прямую косую черту на вашем пути: 

    behavior: url(/pie/PIE.htc);

    Это обеспечит правильность пути, если вынаходятся на странице с более чем одним сегментом URI, например http://example.com/pages/archives/mypage.html.Без передней косой черты она будет относительной от mypage.html, а не от корневой директории (какой она должна быть).

  • Попробуйте принудительно hasLayout(неясная вещь IE), добавив position:relative; или zoom:1 к элементу.Это часто проблема, файл HTC ссылается правильно, но стили не будут применяться без него.

Внимательно прочитайте страницу известные проблемы и убедитесь, что выне испытывают никаких других общих проблем.

0 голосов
/ 13 марта 2014

Ребята, я нашел проблему, которую вы искали. Прежде всего я использовал 2 разных веб-хостинга. 1 из моих и 1 из компании.

Я сделал свой полностью отзывчивый css3 веб-дизайн вручную на своем собственном веб-сайте ... который мне понадобился файл PIE.htc, чтобы закругленные углы работали для всех версий IE, и мне это удалось!.

Однако, когда я загружал те же файлы на веб-хостинг моей компании, он больше не работал. И оказывается, что они не поддерживают файлы .htc. Я почесал голову и тоже не понял, но потом обнаружил, что этот провайдер будет работать с файлом PIE.php.

Так что, если у вас это не сработает; 

.bg {
    border-radius:60px;
    width: 80%;
    height: 85%;
    position: fixed;
    top: 10.2%;
    left: 18%;
    z-index: 1;
    border:3px solid #fff; 
    background:#fff;
    behavior: url(pie/PIE.htc);

, чем это делает; 

.bg {
    border-radius:60px;
    width: 80%;
    height: 85%;
    position: fixed;
    top: 10.2%;
    left: 18%;
    z-index: 1;
    border:3px solid #fff; 
    background:#fff;
    behavior: url(pie/PIE.php);

Просто измените PIE.htc на PIE.php , и он будет работать.

0 голосов
/ 18 сентября 2013

Я боролся с этим, Все, что я могу предложить, это попробовать.Используйте версию Javascript с jQuery 

    <!--[if lt IE 9]>
          <script type="text/javascript" src="js/PIE_IE678.js"></script>
        <![endif]-->
        <!--[if IE 9]>
          <script type="text/javascript" src="js/PIE_IE9.js"></script>
        <![endif]-->

  <!--[if IE]>
            <link rel="stylesheet" type="text/css" href="css/ie.css"/>
            <script>
               $(function() {
                if (window.PIE) {
                    $('.Circle').each(function() {
                        PIE.attach(this);

                      //  alert("Attached");
                    });
                }
            });
            </script>

           <![endif]-->

Теперь в вашем CSS, с классом .Circle или любым классом, использующим CSS 3, дайте им:

zoom : 1; позиция : относительная;

Еще одна заметка, которую я нашел при использовании jQuery и плагина migrate - некоторые "привередливы" к этой работе. 

<script src="http://code.jquery.com/jquery-1.9.0.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script>

Если повезет,это сделает свое дело.

0 голосов
/ 26 ноября 2012

КАК убедиться, что ваш файл HTC загружается ..

  1. поставить ниже <script type="text/javascript"> alert("test"); эта проверка предупреждений при загрузке файла
  2. введите полный URL-адрес в файл CSS behavior: url("http://www.yourwebsite.com/test/PIE.htc"); Когда вы загружаете страницу, появляется предупреждение:)
  3. это означает, что вы уверены, что файл загружается:)
  4. теперь сократите behavior: url("relative to the CSS-FILE/PIE.htc"); и убедитесь, что вы все еще получаете предупреждение
  5. убрать предупреждение =)

Теперь вы на 100% уверены, что он использует файл HTC

0 голосов
/ 09 февраля 2012

У меня тоже были эти проблемы в мои ранние дни.

Вы должны хранить файл pie.htc обычно в корне папки проекта.

Я знаю, что следующее решениенемного странно, но вы можете попробовать это

Попробуйте добавить предупреждение или консоль в файл pie.htc и поместите файл в каждую папку, пока он не будет отрендерен.

...