html - 内容未在移动设备上显示

Question

我在一个网站上工作，当在移动设备上使用时，它除了下面的页面之外都可以正常工作。当菜单部分处于事件状态时， Accordion 应该可以显示菜单项，但在移动设备上，当 Accordion 处于事件状态时，内容不会显示？

http://valleyinn.ie/menus/menus.html

html

<H1> A La Carte Menu </H1>
    <div class="wrapper"> 
    <ul class="accordion">
        <li class="nav-dropdown">
            <input type="radio" name="accordion" id="menu 1" />
            <label for="menu 1">
                Starters
            </label>
            <div>
                <h2>Starters</h2>
                <p>Prawn cocktail : Clogherhead prawns coated in Marie Rose sauce served with salad</p>
                <p>Garlic Bread: Garlic bread coated with mozarella cheese</p>
                <p>Bruchetta: Garlic toastie with tomato, basil and melted mozzarella</p>
                <p>Deep Fried Brie: Breaded parcels of Brie deep fried and served with redcurrant jelly</p>
                <p> Garlic Mushrooms: Deep fried breaded mushrooms with garlic mayonnaise</p>
                <P>Fan of Melon: Fan of honeydew melon served with Raspberry Coulis</P>
                <p>Caesar Salad: Crispy cos tossed with bacon, croutons & creamy caesar dressing with parmesan shavings</>
                <p>Soup of the Day
                <p>Chicken Wings: Marinated chicken wings served with sweet chilli dip & side salad</p>
                <p>Egg Mayonnaise</p>
                <P>Tiger Prawns: Served with honey mustard dressing & garlic bread</P>
            </div>
        </li>

和CSS

div#title {
    text-align:center;
}
body div.wrapper {
    clear:both;
    border: 1px solid #dedede;
    margin: 25px auto;
    overflow: hidden;
    width: 80%;
 }   
ul.accordion {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
ul.accordion li input {
    display: none;
    padding: 0;
    margin: 0;
    visibility: hidden;
}
ul.accordion label {
    background-color: #000000;
    border-bottom: 1px solid #dedede;
    box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.055);
    color:  #F9C921;
    display: block;
    font-weight: bold;
    line-height: 42px;
    padding: 0 8px;
}
ul.accordion label:hover {
    background-color: #F9C921;
    color:#000000;
    cursor: pointer;    
}
ul.accordion li input ~ div {
    background-color: rgba( 0, 0, 0, .05 );
    max-height: 0;
    opacity: 0;
overflow: hidden;
    visibility: hidden;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
ul.accordion li input ~ div p {
    font-size: .9em;
    margin: 16px 24px;  
}
h1 {
    clear:both;
}
ul.accordion li input:checked ~ div {
    max-height: 100%;
    opacity: 1;
    visibility: visible;
}
ul.accordion li input:checked ~ div > ul {
    display: block; 
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

除了制作我以前从未做过的移动设备特定页面之外，我想不出从哪里开始的任何可能的修复或解决方法

通过更改代码来避免问题。

Answer 1

总而言之，不同的浏览器解析代码的方式不同。还有一些在自动“修复”HTML 错误方面做得更好。检查您使用移动设备的浏览器是否已更新。然后检查它是否支持该方法。

在您的代码中:您缺少结束语 </p>因为它只显示为 </> , 两个大写 </P>所以将它们更改为小写 </p> , 和 soup of the day缺少结尾 </p> .同时将 ID 名称从 menu 1 更改为至 menu_1 .