2011-01-11 11 views
16

Ich versuche, CSS3PIE und es funktioniert überhaupt nicht in IE Demo.CSS3 und PIE funktioniert nicht in IE 8

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); 
} 

Das Ergebnis ist nur ein Block mit einer Grenze, kein Gefälle/Schatten etc

Jede Hilfe/Lösung sehr geschätzt würde.

+0

Gibt es Gründe, mit nicht 'Filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# EDEBEB', endColorstr = '# C9C7C8', GradientType = 0);'? –

Antwort

34

Der behavior Standort soll, um Ihre HTML-Datei relativ sein. Also Ihr index.html und PIE.htc unter der Annahme, in root und CSS ist in einem ‚CSS‘ Ordner, sollten Sie so gehen:

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

auch versuchen, das Hinzufügen einer .htaccess Datei mit folgendem Inhalt in der gleichen Position wie die PIE.htc Datei:

AddType text/x-component .htc 

Hoffnung, das hilft.

+0

Das hat es in IE10 für IE8 Kompatibilitätsmodus behoben, aber nicht im echten IE8 ... irgendwelche Ideen? – DrCord

+0

@DrCord wow, wusste das nicht ... Nicht sicher, da ich mich momentan nicht mehr auf CSS3PIE verlasse. Ich unterstütze IE8 + und ich Code eine solide Layout-Struktur; zu "fancy visual effects": was funktioniert auf IE, funktioniert auf IE, und was nicht, keine große Sache, Design sieht sowieso gut aus. –

+0

Diese htaccess Datei hat den Job für mich erledigt, danke – Metzed

0

Stellen Sie sicher, dass Sie die neueste Beta-Version haben. Wenn die HTC-Datei weiterhin Probleme verursacht, versuchen Sie die JS-Implementierung.

2

Try-Cache in Ihrem Browser zu löschen. Besonders wenn Sie zwischen den Kompatibilitätsmodi wechseln. Es hilft wirklich

+2

Dies sollte als Kommentar keine Antwort sein. –

4

Hinzufügen: AddType text/x-component .htc - zu der .htaccess Datei arbeitete wie ein Charme für mich.

Mit der CSS-Kurzschreibweise können Sie steuern, welche Ecken abgerundet werden sollen oder nicht.

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

Verwandte Themen