-2
Der CSS3 Übergangseffekt auf diesem page funktioniert tadellos auf jedem anderen Browser außer IE. Außerdem wird oben und links neben den Miniaturansichten ein Rahmen hinzugefügt. Ich habe versucht, die Grenzen aller Elemente 0 zu machen, aber es hat immer noch nicht geholfen. Das CSS ist wie unten gezeigt.CSS3 Browserkompatibilität
.slide-up-boxes .showbox a {
display: block;
margin: 0 0 20px;
height: 157px;
overflow: hidden;
width: 315px;
float: left;
border:none;
padding: 0px;
background: transparent;
}
.slide-up-boxes .showbox img {
color: #333;
text-align: center;
margin-right: 15px;
width: 315px;
float: left;
height: 157px;
font: italic 18px/65px Georgia, Serif; /* Vertically center text by making line height equal to height */
zoom: 1;
filter: alpha(opacity=45);
opacity: 0.5;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
}
.showbox a:hover img {
margin-top: -155px;
opacity: 0;
height: 157px;
width: 315px;
}
.showbox object {
color: white;
background: #393838;
font: 12px/15px Georgia, Serif;
opacity: 0;
-webkit-transform: rotate(6deg);
-webkit-transition: all 0.4s linear;
-moz-transform: rotate(6deg);
-moz-transition: all 0.4s linear;
-o-transform: rotate(6deg);
-o-transition: all 0.4s linear;
width: 314px;
float: left;
height: 154px;
border: none;
padding: 0px;
margin: 0px 15px 0px 0px;
}
.slide-up-boxes .showbox a:hover object {
opacity: 1;
width: 314px;
border: none;
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-o-transform: rotate(0);
zoom: 1;
}
.slide-up-boxes .showbox#show1 object {
background: url(images/huethumb.jpg) ;
padding-top: 110px; zoom: 1;
border: none;
}
.slide-up-boxes .showbox#show2 object {
background: url(images/pizzathumb.jpg) ;
padding-top: 110px; zoom: 1;
border: none;
}
.slide-up-boxes .showbox#show3 object {
background: url(images/rickolthumb.jpg) ;
padding-top: 110px;
border: none;
}
.slide-up-boxes .showbox#show4 object {
background:url(images/bernie-thumber.jpg) ;
padding-top: 110px; zoom: 1;
background-repeat: no-repeat;
border: none;
}
.slide-up-boxes .showbox#show5 object {
background: url(images/nollythumb.png) ;
padding-top: 110px; zoom: 1;
border: none;
}
.slide-up-boxes .showbox#show6 object {
background:url(images/photothumg.jpg) ;
padding-top: 110px; zoom: 1;
border: none;
}
.slide-up-boxes .showbox#show7 object {
background:url(images/tradersthumb.png) ;
padding-top: 110px; zoom: 1;
border: none;
}
.slide-up-boxes .showbox#show8 object {
background:url(images/wpbathumb.jpg);
padding-top: 110px; zoom: 1;
border: none;
}
.slide-up-boxes .showbox#show9 object {
background:url(images/peterthumb.png);
padding-top: 110px;
zoom: 1;
border: none;
}
Was ist Ihre Frage? – j08691
Wie mache ich die Grenzen, wenn sie auf IE angezeigt werden? Wie kann ich den Animationseffekt wie bei anderen Browsern auf IE anwenden? –
Soll es in IE funktionieren? Über welche Version reden wir hier? Wenn Kommentare unzureichende Informationen enthalten und um Klärung bitten, sollten Sie Ihre Frage entsprechend bearbeiten, anstatt einen weiteren Kommentar zu verfassen. – Sparky