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

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

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

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

图例元素

可以使用此元素的上下文：作为字段集元素的第一个子元素。

这意味着只有次你可以使用<legend>是这样的：

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

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

在尝试解决 HTML、CSS 或 JavaScript 中的问题之前，请务必先使用The W3C Markup Validation Service 检查您的结果。无法调试损坏或无效的 HTML。