0
私はhtmlファイル/ CSSの外部スタイルシートに取り組んでいます すべては、クロム、ファイアウォール、オペラで素晴らしいと思われますが、インターネットエクスプローラで何かを見ると、ウェブサイトの特定のスライスは、私のフォントは、iPhoneやipadのデバイスに欠けている。！重要！タグ
誰にでも解決策がありますか？私は！importantを使ってみました。タグ、そして私の理解に次のようなことを書く：
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";
私の理解では、重要なタグは私が置いた最初の位置を否定し、IEのセクション位置を使用し、Chromeは重要なタグを無視します。これは誰かが私に言われたことですが、私は別の方法で見たことがあり、ちょうどIEで見るときに位置問題を解決するためのより良い解決策を持っていたいと思います。
私は残念ながら原因私たちのCMSにHTML 5とCSS3の詩HTML4と定期的なCSSでコーディングする必要があります/
任意の助けもいただければ幸いです。
ありがとうございます！
は、私はまた、クロームVS IEでどのように見えるかの写真を提供してきた
これはクロームです：これは、Internet ExplorerでIE 
Chromeは重要なタグを無視したり、ブラウザによっては無視されません。それがポイントです。 –
Paulie、私のためにそれを明確にしてくれてありがとう。 IEに残されたページから落ちるアイテムの位置を修正するためのより良い解決策がありますか？ありがとう！ –
[MCVE]（http://stackoverflow.com/help/mcve）を用意して、アイテムがIEでは残っているがChromeでは残っていない場合を示してください。 – Alohci