HTML：为什么在手机浏览器中看不到带有html图例标记的元素？

Question

第一张图片属于Chrome桌面，第二张图片是适用于Android的浏览器 ，问题是因为在移动浏览器（包括iPhone的Safari）中，我无法在我创建的网站上显示图例标签，例如“ Area de “ administradores”是传说，它可以使slideDown单击执行，如桌面浏览器的图像所示，但在移动电话的nevegador中，我无法单击。

知道为什么会发生此错误吗？ 下一个代码属于表单登录名：

  <div id="content">
    <div id="wrapper">
        <legend id="leyendaAdmin">// Área de administradores</legend>
            <div class="loginIndex" >   
                <div class="titleIndex">
                    <img src="images/itcxx.png">
                    <h1>Bienvenido al<br>Centro de Información</h1>
                </div>
                <div class="inputLogin">
                    <form id="formLogin" name="formLogin" method="post" action="doLogin.php">
                        <center><h2>Iniciar sesión</h2></center>
                        <p class="fUser">
                        <input id="ncontrolLogin" name="ncontrolLogin" placeholder="Número de control" type="text" AUTOCOMPLETE=OFF maxlength="8" onKeyPress="return _onlyNumber(event);"/>
                        </p>
                        <p class="fPasswd">
                            <input id="passwdLogin" name="passwdLogin" placeholder="Contraseña" type="password" AUTOCOMPLETE=OFF maxlength="4" onKeyPress="return _onlyNumber(event);"/>
                        </p> 
                        <input id="bIniciar" name="bIniciar" value="Iniciar" type="submit"/>
                    </form> 
                    <br/>
                    <div id="status_msg"></div> 
                </div>
            </div>
        </div>
        <br/>
        <div id="wrapper">
            <legend id="leyenda">// Área de visitantes</legend>
            <button id="bSearch" name="bSearch">Realizar búsqueda</button>
        </div>
</div>

和CSS：

#wrapper legend{
    text-align:left;
    background-color:#000;
    color:#F0F0F0;
    font-size:25px;
    float:left;
    width:100%;
    padding:5px 0px 5px 10px;
    margin:10px 0px;
    border-bottom:1px solid #fff;
    border-top:1px solid #d9d9d9;
}

Answer 1

我至少可以看到两个问题。 注释中提到了一个，一页上不能有两个具有相同id属性的元素。

另一个问题可能是您遇到的问题：您错误地使用了<legend> 。

http://www.w3.org/TR/2011/WD-html5-20110525/forms.html#the-legend-element

图例元素

可以使用此元素的上下文： 作为fieldset元素的第一个子级。

这意味着， 唯一的一次，你可以使用<legend>是这样的：

<fieldset>
    <legend></legend>
     <!-- content -->
 </fieldset>

浏览器可以随意使用无效的标记进行操作，您可能会看到这种副作用。

在尝试解决HTML，CSS或JavaScript中的问题之前，请始终先使用W3C标记验证服务检查结果。 调试损坏或无效的HTML是不可能的。