无序列表和字体在不同浏览器中显示不同

-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