2011-01-11 10 views
16

ImはCSS3PIEをデモしようとしていますが、IEでは動作しません。IE3で動作しないCSS3とPIE

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
    <head> 
    <meta http-equiv="content-type" content="text/html; charset=windows-1250"> 
    <link href="test.css" type="text/css" rel="stylesheet"> 
    <title>Test</title> 
    </head> 
    <body> 

    <div id="title"></div> 
    <div id="sub_title"></div> 
    <div id="main_area"> 
     <div id="date_area"></div> 
    </div> 

    </body> 
</html> 

CSS:

body{ 
margin: 0 auto; 
} 

#title{ 
margin: 0 auto; 
width: 100%; 
height: 40px; 
background-color: white; 
} 

#sub_title{ 
    margin: 0 auto; 
    width: 100%; 
    height: 25px; 
    background-color: green; 
} 

#date_area{ 
    width: 310px; 
    height: 250px; 
    border: 1px solid #4A4949; 
    padding: 60px 0; 
    text-align: center; 
    -webkit-border-radius: 1px; 
    -moz-border-radius: 1px; 
    border-radius: 1px; 
    -webkit-box-shadow: #707070 2px 2px 4px; 
    -moz-box-shadow: #707070 2px 2px 4px; 
    box-shadow: #707070 2px 2px 4px; 
    background: #EBEBEB; 
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#EDEBEB), to(#C9C7C8)); 
    background: -moz-linear-gradient(#EDEBEB, #C9C7C8); 
    background: linear-gradient(#EDEBEB, #C9C7C8); 
    -pie-background: linear-gradient(#EDEBEB, #C9C7C8); 
    behavior: url(/PIE.htc); 
} 

結果が国境とわずか1ブロックで、無勾配/シャドウなど

すべてのヘルプ/ソリューションは、はるかに高く評価されるだろう。

+0

'フィルタを使用していないために、任意の理由:プログラムID:DXImageTransform.Microsoft.gradient(startColorstr = '#1 EDEBEB'、endColorstr = '#1 C9C7C8'、するGradientType = 0);'? –

答えて

34

を使用する他の宣言のように、場所はHTMLファイルに関連している必要があります。だからあなたのindex.htmlPIE.htcがルートにあり、あなたのCSSは、「CSS」フォルダ内にある、あなたはこのように行くべきと仮定:

background-image: url(../images/example.jpg); 
behavior: url(PIE.htc); 

また、同じ場所に次の内容の.htaccessファイルを追加してみてくださいPIE.htcファイル:

AddType text/x-component .htc 

希望します。提案されているよう

position:relative; 
z-index: 0; 

を追加

+0

これは、IE8の互換モードのためにIE10で修正されましたが、実際のIE8ではありません...任意のアイデア? – DrCord

+0

@DrCordうわー、それを知りませんでした...私は現在、CSS3PIEにもう依存していないので、それは分かりません。私はIE8 +をサポートしています。 「魅力的な視覚効果」について:IE上で動作するもの、IE上で動作するもの、それほど大したことではない、とにかくデザインはうまくいく。 –

+0

そのhtaccessファイルが私のために仕事をしました、ありがとう – Metzed

0

ベータ版が最新のものであることを確認してください。 HTCファイルで引き続き問題が発生する場合は、JSの実装を試してください。

2

は、ブラウザのキャッシュをクリアしてみてください。互換モードを切り替えると特に便利です。本当に役に立ちます

+2

これはコメントではありません答えにする必要があります。 –

4

追加:AddType text/x-component .htc.htaccessファイルは私にとっては魅力的でした。

簡略化されたCSSプロパティは、角を丸めるかどうかを制御します。

border-radius: 0 15px 15px 0;/*(top-left, top-right, bottom-right, bottom-left). */

関連する問題