CSS3PIE вообще не работает в IE - PullRequest
0 голосов
/ 20 января 2012

Я пытаюсь использовать обходной путь для получения закругленных углов в IE, используя http://css3pie.com. Я включил следующее в мой CSS, который загружается при загрузке страницы. Все это загружается в Joomla 1.5.

.form_field {color:#222 !important; border:2px solid #333; background:#f4f4f4;-webkit-    border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px; color:#fff; padding:2px 0px 2px 0px; position:relative; z-index:99999;
behavior: url(./PIE.htc);

Приведенный выше код хранится в CSS-файле с именем template.css.

PIE.htc и PIE.php находятся в корне моего сайта.

Ниже приведены некоторые «источники просмотра», генерируемые при загрузке страницы в IE 9 с выбранным режимом рендеринга в IE 8.

      <link rel="stylesheet" href="/sos/plugins/system/rokbox/themes/light/rokbox-style.css" type="text/css" />
      <link rel="stylesheet" href="/sos/components/com_gantry/css/gantry.css" type="text/css" />
      <link rel="stylesheet" href="/sos/components/com_gantry/css/grid-12.css" type="text/css" />
      <link rel="stylesheet" href="/sos/components/com_gantry/css/joomla.css" type="text/css" />
      <link rel="stylesheet" href="/sos/templates/sos/css/joomla.css" type="text/css" />
      <link rel="stylesheet" href="/sos/templates/sos/css/customstyle.css" type="text/css" />
      <link rel="stylesheet" href="/sos/templates/sos/css/extended.css" type="text/css" />
      <link rel="stylesheet" href="/sos/templates/sos/css/sos-styles.css" type="text/css" />
      <link rel="stylesheet" href="/sos/templates/sos/css/template.css" type="text/css" />
      <link rel="stylesheet" href="/sos/templates/sos/css/typography.css" type="text/css" />
      <link rel="stylesheet" href="/sos/templates/sos/css/fusionmenu.css" type="text/css" />
      <script type="text/javascript" src="/sos/components/com_gantry/js/mootools-1.2.5.js"></script>
      <script type="text/javascript" src="/sos/plugins/system/rokbox/rokbox-mt1.2.js"></script>
      <script type="text/javascript" src="/sos/plugins/system/rokbox/themes/light/rokbox-config.js"></script>

Как видно из вышесказанного, файл template.css загружается, если я перехожу в chrome, выполняется код радиуса границы css3, поэтому я знаю, что файл загружается. По какой-то причине поведение пирога не работает, когда страница просматривается в IE. Углы просто оставлены квадратными по некоторым причинам: -S. Даже если они показывают, что имеют класс 'form_field'. Я просматривал документы по поиску и устранению неисправностей на веб-сайте CSS3PIE, но, похоже, не могу найти какое-либо решение.

Изменить >>>>>>>>>>>>>>>>>>>>>>>

Я даже пытался поместить его в собственный файл CSS в корне моего сайта:

который при нажатии в представлении исходного кода загружает файл css, поэтому я знаю, что он работает, внутри файла css у меня есть @charset "utf-8";

/* CSS Document */
.form_field {border-radius: 5px !important; color:#fff !important; padding:2px 0px 2px 0px      !important; position:relative !important; z-index:99999 !important;
behavior: url(./PIE.htc) !important;}

поэтому единственное, о чем я могу думать сейчас, это то, что joomla что-то раздевает или сталкивается с чем-то другим: -S.

EDIT 2 >>>>>>>>>>>>>>>>>>>>

Хорошо, все еще нет, я закомментировал все js-файлы из моего index.php, чтобы убедиться, что с ним ничего не будет конфликтовать, и до сих пор нет.

EDIT 3 >>>>>>>>>>>>>>>>>>>>

Наконец!, Для всех остальных, вот как это сделать с Joomla и CSS3PIE. Не знаю, почему он не будет работать с PIE.htc, но если вместо этого вы используете PIE.php, то это работает.

Создайте CSS-файл с именем PIE.CSS, поместите его в корень своего сайта, внутри него поместите:

@charset "utf-8";
/* CSS Document */
.YOURCLASSNAME {border-radius: 5px !important; color:#fff !important; padding:2px 0px 2px 0px       !important; position:relative !important; z-index:99999 !important;
behavior: url(./PIE.php) !important;}

Затем откройте файл шаблона index.php и вставьте

<link rel="stylesheet" type="text/css" href="./PIE.css" />

Затем перейдите к тому, что вы хотите стилизовать, например, к некоторым полям формы в статье, и введите: class = "YOURCLASSNAME" в любых полях / элементах div и т. д., для которых требуется стиль.

Это должно тогда, пальцы скрещены работать. : -)

Ответы [ 2 ]

5 голосов
/ 20 января 2012

Вы предоставляете htc-файл с правильным mimetype? Должен быть текстовым / х-компонентом Также файл не должен быть подан gzipped. Вы просмотрели следующий сайт: http://www.twinhelix.com/css/iepngfix/demo/?

0 голосов
/ 06 мая 2013

У меня была эта проблема, и я на какое-то время сводил меня с ума, пытаясь разобраться. Для меня оказалось, что это была аномалия в том, как IE интерпретирует свойство поведения ... это «поведение» отличается от всех других URL, указанных в свойстве css. Это из поддержки CSS3PIE:

  • IE интерпретирует URL для свойства поведения относительно исходный HTML-документ, а не относительно CSS-файла, как каждый другое свойство CSS. Это делает вызов PIE поведения неудобно, потому что URL должен быть либо:

    • Абсолют из корня домена - это делает CSS не легко перемещаемым между каталогами - или,
    • Относительно документа HTML - это делает CSS не так-то иным образом повторно используемым между различными файлами HTML.

Итак, если у вас есть файлы PIE в корневом каталоге, используйте URL ('/ PIE.htc'). Мне также нужно было использовать метод URL ('/ PIE.php'), поэтому, если вы используете PHP, попробуйте тоже.

...