！重要;標籤

我正在處理HTML文件/ CSS外部樣式表在Chrome，Firefox和Opera中一切看起來很棒，但是當在Internet Explorer中查看任何東西時，網站的某些片段在它們應該居中時會左齊，而我iPhone和iPad設備上缺少我的字體。！重要;標籤

沒有人有解決方案嗎？我試着用！重要的;標籤，並以我的理解，你把它寫成這樣：

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";

} 的HTML，CSS和JavaScript上面的工作在CHROME，FIREFOX和SAFARAI，但不是Internet Explorer。不知道如何解決這個問題。

就我的理解而言，重要的標記會否定我放置的第一個位置，並使用IE中的截面位置，並且Chrome會忽略重要的標記。這是有人告訴我的，但是我已經看到了，只是想在IE中查看時解決定位問題的更好的解決方案。

我不幸與HTML4和定期CSS詩句HTML 5和CSS3的代碼，由於我們的CMS：/

任何幫助將非常感激。

謝謝！

我也提供了它的外觀在Chrome VS IE圖片

這是Chrome瀏覽器：