Ich arbeite an einem HTML-Datei/CSS externen Stylesheet Alles sieht wunderbar in Chrome, Firefox und Opera, aber wenn Sie etwas im Internet Explorer bestimmte Teile der Website sind links Flush, wenn sie zentriert sein sollte, und ich habe meine Schriftarten auf iPhone und iPad-Geräten fehlen.Die! Wichtig; tag
hat jemand eine Lösung dafür? Ich habe versucht, das! Wichtig zu verwenden; Tag und zu meinem Verständnis schreiben Sie es als solche:
HTML:
<img class="timelineArrow" src="http://assets.daddario.com/html_fragments/images/timelineArrow.png" alt="timelineArrow">
<img class="barneyNotCows" src="http://assets.daddario.com/html_fragments/images/notcows_barney.png" alt="barney">
<!--Timeline-->
<div class="bulletPlayer" id="bullet1" style="display:">
<a href="javascript:void(0)" onMouseUp="chooseFact('bullet1');" class="bulletOne selected"></a><br />
<a href="javascript:void(0)" onMouseUp="chooseFact('bullet2');" class="bulletTwo"></a><br />
<a href="javascript:void(0)" onMouseUp="chooseFact('bullet3');" class="bulletThree"></a><br />
<a href="javascript:void(0)" onMouseUp="chooseFact('bullet4');" class="bulletFour"></a><br />
</div>
<div class="bulletPlayer" id="bullet2" style="display: none;">
<a href="javascript:void(0)" onMouseUp="chooseFact('bullet1');" class="bulletOne"></a><br />
<a href="javascript:void(0)" onMouseUp="chooseFact('bullet2');" class="bulletTwo selected"></a><br />
<a href="javascript:void(0)" onMouseUp="chooseFact('bullet3');" class="bulletThree"></a><br />
<a href="javascript:void(0)" onMouseUp="chooseFact('bullet4');" class="bulletFour"></a><br />
</div>
<div class="bulletPlayer" id="bullet3" style="display: none;">
<a href="javascript:void(0)" onMouseUp="chooseFact('bullet1');" class="bulletOne"></a><br />
<a href="javascript:void(0)" onMouseUp="chooseFact('bullet2');" class="bulletTwo"></a><br />
<a href="javascript:void(0)" onMouseUp="chooseFact('bullet3');" class="bulletThree selected"></a><br />
<a href="javascript:void(0)" onMouseUp="chooseFact('bullet4');" class="bulletFour"></a><br />
</div>
<div class="bulletPlayer" id="bullet4" style="display: none;">
<a href="javascript:void(0)" onMouseUp="chooseFact('bullet1');" class="bulletOne"></a><br />
<a href="javascript:void(0)" onMouseUp="chooseFact('bullet2');" class="bulletTwo"></a><br />
<a href="javascript:void(0)" onMouseUp="chooseFact('bullet3');" class="bulletThree"></a><br />
<a href="javascript:void(0)" onMouseUp="chooseFact('bullet4');" class="bulletFour selected"></a><br />
</div>
CSS:
/*** TIMELINE ASSETS */
.timelineArrow
{
position: absolute;
margin-left: -18px;
margin-top: 98px;
}
.barneyNotCows
{
position: absolute;
margin-top: 530px;
margin-left: -243px;
}
.bulletPlayer
{
position: relative;
text-align: center;
z-index: 9999;
}
.bulletOne {
position: absolute;
top: 200px;
margin-left: -18px;
width: 500px;
height: 246px;
background: url(images/dotOneUpState.png) no-repeat left top;
}
.bulletOne:hover,
.bulletOne.selected {
background: url(images/dotOneDownState.png) no-repeat left top;
top: 200px;
margin-left: -22px;
}
.bulletTwo {
position: absolute;
top: 330px;
margin-left:-17px;
width: 500px;
height: 246px;
background: url(images/dotTwoUpState.png) no-repeat left top;
}
.bulletTwo:hover,
.bulletTwo.selected {
background: url(images/dotTwoDownState.png) no-repeat left top;
top: 330px;
margin-left: -20px;
}
.bulletThree {
position: absolute;
top: 471px;
margin-left:-16px;
width: 500px;
height: 246px;
background: url(images/dotThreeUpState.png) no-repeat left top;
}
.bulletThree:hover,
.bulletThree.selected {
background: url(images/dotThreeDownState.png) no-repeat left top;
top: 471px;
margin-left: -21px;
}
.bulletFour {
position: absolute;
top: 591px;
margin-left:-17px;
width: 500px;
height: 203px;
background: url(images/dotFourUpState.png) no-repeat left top;
}
.bulletFour:hover,
.bulletFour.selected {
background: url(images/dotFourDownState.png) no-repeat left top;
top: 591px;
margin-left: -21px;
}
JavaScript
// HIDE AND REVEAL TABS
function chooseFact(tab) {
// SET THE CHOSEN SECTION AS VISIBLE AND HIDE THE OTHERS
document.getElementById('bullet1').style.display = "none";
document.getElementById('bullet2').style.display = "none";
document.getElementById('bullet3').style.display = "none";
document.getElementById('bullet4').style.display = "none";
document.getElementById(tab).style.display = "block";
} Die HTML, CSS und JavaScript oben funktioniert in CHROME, FIREFOX und SAFARAI aber NICHT Internet Explorer. nicht sicher, wie Sie dieses Problem beheben können.
zu meinem Verständnis, das wichtige Tag negiert die erste Position, die ich setzen und die Abschnittsposition in IE verwenden und dass Chrome wichtige Tags ignoriert. Das hat mir jemand gesagt, aber ich habe es anders gesehen und möchte einfach eine bessere Lösung für die Lösung von Positionierungsproblemen beim Betrachten im IE haben.
ich muß leider mit HTML4 und regelmäßigen CSS Versen html 5 und CSS3 Code aufgrund unserer CMS:/
Jede Hilfe sehr geschätzt würde.
Danke!
Ich habe zur Verfügung gestellt auch Bilder wie es aussieht in Chrome VS IE
Dies ist Chrome:
Dies ist IE 
Chrome ignoriert die wichtigen Tags NICHT und auch keinen Browser. Das ist der Punkt. –
Paulie, Danke, dass du das für mich erklärt hast. Gibt es eine bessere Lösung, um die Positionierung von Objekten zu korrigieren, die von der im IE zurückgelassenen Seite fallen? Vielen Dank! –
Sie sollten eine [MCVE] (http://stackoverflow.com/help/mcve) angeben, die einen Fall veranschaulicht, in dem Elemente von der Seite im IE, nicht aber in Chrome, fallen. – Alohci