無序列表和字體在不同瀏覽器中顯示不同

-7

我正在使用無序列表和腳本MT Bold此頁上的字體。現在有兩個問題：無序列表和字體在不同瀏覽器中顯示不同

無序列表在Chrome和Opera正確顯示，但無法在Internet Explorer和Firefox，也就是說，它不顯示顯示和隱藏效果，所有的內容都默認情況下可見。
字體在Firefox和Internet Explorer中正確顯示，但不在Chrome和Opera中顯示。我正在使用所有瀏覽器的最新版本。這裏是我的代碼：

article p { 
 
      color: green; 
 
      font-size: 15px; 
 
      font-family: arial; 
 
      width: 880px; 
 
     } 
 

 
body { 
 
      margin:0px auto; 
 
    text-align:left; 
 
} 
 
#mainDivContainer{ 
 
    position: relative; 
 
    margin-top: 0px; 
 
    margin-bottom: 0px; 
 
} 
 

 
#insideMainDivContainer{ 
 
    width: 1050px; 
 
    margin-top: 5px; 
 
    margin-left: 120px; 
 
    margin-right:auto; 
 
    background-color:white; 
 
    border:1px solid black; 
 
} 
 
     details { 
 
      color: green; 
 
      font-family: Script MT Bold; 
 
      font-size: 20px; 
 
     } 
 
     h1 { 
 
      margin-top: 30px; 
 
      font-family: Script MT Bold; 
 
      color: green; 
 
      font-size: 30px; 
 
      } 
 

 
     details ul { 
 
      color: green; 
 
      font-size: 15px; 
 
     } 
 
      .auto-style1 { 
 
      color: green; 
 
      font-style: italic; 
 
      text-align: justify; 
 

 
     } 
 

 
     .auto-style2:hover{ 
 
      -ms-transform: scale(1.1,1.1); 
 
      transform: scale(1.1,1.1); 
 
      -webkit-transform: scale(1.1,1.1); 
 
      -ms-transform: scale(1.1,1.1); 
 

 
     } 
 

 
     .auto-style3:hover{ 
 
      font-weight: bold; 
 
     } 
 

 
    #links{ 
 
    width: 950px; 
 
    height: 170px; 
 
    position: relative; 
 
    margin:25px; 
 
    margin-left: 30px; 
 
    padding: 0px; 
 
    overflow: hidden; 
 
} 
 
#catchline{ 
 
    width:500px; 
 
    height:20px; 
 
    float:left; 
 
    text-align:center; 
 
} 
 

 
#textHolder{ 
 
    float:left; 
 
    width: 950px; 
 
    height: 300px; 
 
    word-spacing: 1px; 
 
    padding-left:10px; 
 
    padding-top: 20px; 
 
    text-align:left; 
 
    margin-top: 30px 
 
} 
 
special{ 
 
    font-family: Script MT Bold; 
 
    list-style-type: none; 
 
    font-size: 25px; 
 
    font-style: italic; 
 
    font-weight: bold; 
 
    color: chocolate; 
 
    margin-top: 10px 
 
}

<html> 
 
    <body> 
 
<div id="mainDivContainer"> 
 
    <div id="insideMainDivContainer"> 
 

 
<div id="catchline"> 
 
<span class="auto-style1"><b>We make your experience a special one!</b></span> 
 
</div> 
 

 
<div id="textHolder"> 
 
    <article> 
 
     <div class="auto-style1"><p class="auto-style3"> 
 
     FoodHub is an American chain of restaurants that enables food lovers to come together and 
 
     enjoy food. It provides online delivery of food items, 24*7. At FoodHub, you will have 
 
     some of city's best destination cafes, bistros, restaurants, fast food and others under one roof. 
 
</p></div> 
 

 
<div class="auto-style1"><p class="auto-style3"> 
 
     FoodHub provides its customer a healthy combination of surreal surroundings in addition to 
 
     tongue tickling food of different cuisine. FoodHub is not only the best choice for 
 
     traditional food for any hour of day, but also a good place for children to have fun. 
 
     We provide entertaining facilities, such as puppet shows, for children. 
 
</p></div> 
 
    </article> 
 

 
<details> 
 
     <summary><b> Cuisines we offer:</b></summary> 
 
       <ul> 
 
        <li>American</li> 
 
        <li>Spanish</li> 
 
      <li>Mexican</li> 
 
      <li>Indian</li> 
 
      <li>Chinese</li> 
 
      <li>Mughlai</li> 
 
      <li>Portuguese</li> 
 
      <li>Vietnamese</li> 
 
      <li>Italian</li> 
 
        <li id="special">We also provide bakery products.....</li> 
 
       </ul> 
 
</details> 
 
<h1><I> 
 
Come with your family or friends to cater brilliant tastes! </I></h1> 
 
</div> 
 

 
</div> 
 
</div> 
 
</body> 
 
    </html>

我盡我所能去解決它，但沒有什麼。

來源

2016-05-11 Gaurav Mahindra