无序列表和字体在不同浏览器中的显示方式不同答案

【问题标题】：Unordered List and fonts appearing differently in different browsers无序列表和字体在不同浏览器中的显示方式不同
【发布时间】：2016-09-06 19:39:26
【问题描述】：

我在这个页面上使用了一个无序列表和 Script 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>

我尽我所能解决它，但没有。

【问题讨论】：

标签： html css

【解决方案1】：

<details> 元素目前（2016 年 5 月 11 日）不受 IE 支持，它是 Firefox 中的一项实验性功能，需要设置/启用首选项“标志”。

Per MDN

此功能自 Firefox 47 起在首选项 dom.details_element.enabled 之后可用，默认为 false，除了 Nightly 和 Aurora 版本（错误 1241750）。默认情况下启用对它的支持，即首选项默认为 true，因为 Firefox 49.0（错误 1226455）。

关于字体问题（请不要一次问多个问题）我相信另一个答案是正确的...使用引号。

【讨论】：

【解决方案2】：

关于字体：尝试将“arial”更改为“Arial”并将“Script MT Bold”放在引号中以明确这是 one 字体。 ('Script MT Bold')

列表中的“显示和隐藏”效果是什么意思？是否有任何 JS 应该在悬停时做些什么？

【讨论】：

List 的行为应该类似于单击时的下拉菜单。您可以在“运行代码片段”选项中看到它。
@GauravMahindra 应该由哪个代码触发？
可能是 Summary 标签或 ul 标签。我复制粘贴了。无论如何，带有字体的引号不起作用。结果相同
我将字体名称放在引号中，但没有任何改变。