Question

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

我尽力解决它，但没有。

Answer 1

关于字体：尝试更改＆＃34; arial＆＃34;到＆＃34; Arial＆＃34;然后把＃MT; Script MT Bold＆＃34;在引号中明确表示一个字体。（'Script MT Bold'）

你是什么意思＆＃34; show-and-hide＆＃34;对名单的影响？是否有任何JS应该在悬停时做什么？

Answer 2

IE支持<details>元素（2016年5月11日）并且是Firefox中的一项实验性功能，需要设置/启用首选项'flag'。

Per MDN

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

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

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

2 个答案: