よらノート

Webデザインやコーディングネタに関する関連リンク、HTML、CSS、JSなどを取り上げています。


テーマ:
Webサイト制作の現場で常に足を引っ張る存在「IE(インターネットエクスプローラー)」。
この問題児にもCSS3の角丸やボックスシャドウ、テキストシャドウなどを実装できる便利なPIE.htcですが、使ってみると「なぜか効かない!」というときがちょくちょくあるので、その解決策をご紹介します。



■PIE.htcの使い方
PIE.htcの指定方法ですが、とっても簡単です。

まず、外部ファイルにしたcssに各idやclassの指定を通常通りします。
そして指定の最後の行にbehavior属性でPIE.htcファイルのパスを指定するだけです。

例)
■CSS
.pageLink span{
display:inline-block;
padding:3px 20px;
background:#F4C32F;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
cursor:pointer;
behavior: url(/PIE.htc);
}

■HTML
<a href="http://ameblo.jp/yoranote/" class="pageLink"><span>よらノート</span></a>


という感じです。


■PIE.htcが効かない場合の対処法
1)まずはPIEへの絶対パスで指定する。それでダメならhtmlファイルからの相対パスで指定する。

2).htaccessに「AddType text/x-component .htc」を記述して拡張子.htcのファイルがテキスト形式のファイルであることを伝え、サーバーで適切に使用できるようにする。

3)公式ではposition:relative;を使わないと上手く動作しない場合や、同じセレクタ内の他の要素のエラー原因となる場合があると言っているので、使っても良さそうならposition:relative;を指定してみる。


このあたりを試してみると良いと思います。

ちなみに私は2番目の.htaccessの指定をしていなかったため暫くハマりました・・・;;

AD
いいね!した人  |  リブログ(0)

よらさんの読者になろう

ブログの更新情報が受け取れて、アクセスが簡単になります

AD

ブログをはじめる

たくさんの芸能人・有名人が
書いているAmebaブログを
無料で簡単にはじめることができます。

公式トップブロガーへ応募

多くの方にご紹介したいブログを
執筆する方を「公式トップブロガー」
として認定しております。

芸能人・有名人ブログを開設

Amebaブログでは、芸能人・有名人ブログを
ご希望される著名人の方/事務所様を
随時募集しております。