http://css3pie.comを使用して、IEで角を丸くするための回避策を使用しようとしています。ページの読み込み時に読み込まれる 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);
上記のコードは、template.css という名前の css ファイルに保持されています。
PIE.htc と PIE.php は、私の Web サイトのルートにあります。
以下は、レンダリングを IE 8 レンダリング モードに選択して IE 9 にページをロードしたときに生成される「ビュー ソース」の一部です。
<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 Web サイトのトラブルシューティング ドキュメントを確認しましたが、これまでに解決策が見つからないようです。
編集 >>>>>>>>>>>>>>>>>>>>>>>>
サイトのルートにある独自の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 。
編集 2 >>>>>>>>>>>>>>>>>>>>
わかりました、それでもうまくいきません。index.php からすべての js ファイルをコメントアウトして、何も衝突しないようにしましたが、それでもうまくいきません。
編集 3 >>>>>>>>>>>>>>>>>>>>
最後に、他のすべての人の利益のために、Joomla と CSS3PIE を使用してこれを行う方法を紹介します。PIE.htc で動作しない理由はわかりませんが、代わりに PIE.php を使用すると動作します。
PIE.CSS という名前の 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" />
次に、記事のいくつかのフォーム フィールドなど、スタイルを設定したいものに移動し、スタイル設定が必要なフィールド / div などに : class="YOURCLASSNAME" を配置します。
これで、指が交差するはずです。:-)