1

ブラウザ デスクトップ用 Chrome Android モバイル向けブラウザ

最初の画像は Chrome デスクトップに属し、2 番目は Android 用のブラウザです。問題は、モバイル ブラウザ (iPhone 用の Safari を含む) では、作成しているサイトの凡例ラベルを表示できないため、「Area de administradores は、スライドダウン クリックを与えると、デスクトップ ブラウザーの画像に示されているように実行されるという伝説ですが、モバイル用の 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;
}
4

1 に答える 1

1

私が見ることができる少なくとも2つの問題があります。idコメントで 1 つが言及されました。1 つのページに同じ属性を持つ 2 つの要素を含めることはできません。

他の問題はあなたの問題かもしれません: あなたは<legend>間違って使用しています.

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

凡例要素

この要素を使用できるコンテキスト: fieldset 要素の最初の子として。

つまり、 a を使用できるのは次のような場合だけです。<legend>

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

ブラウザは、無効なマークアップを自由に実行できます。この副作用が発生する可能性があります。

HTML、CSS、または JavaScript の問題を解決しようとする前に、必ず最初にW3C マークアップ検証サービスで結果を確認してください。壊れた、または無効な HTML をデバッグすることは不可能です。

于 2012-05-15T21:13:40.743 に答える