1

当您单击密码字段并打开大写锁定时，出现的灰色小写大写锁定通知图像有问题。地雷显示在框外约 20 像素的右侧。这会导致阻塞，因此用户无法看到位于该位置的 div 层。

有人能告诉我为什么我的密码没有显示在密码字段中，我怎么能把它弄进去？

我的 HTML 表单已经用 css 进行了编辑，以在框上显示图像背景，所以我想它与 css 有关。

但我找不到任何与之相关的东西。谢谢。

代码：

<style>



#main{
        width:440px;
        height:0px;
        margin-top:1px;
        margin-left:10px;
        margin-bottom:0px; 
        position:relative;
        text-align:left;
    }

    #main form{
        width:440px;
        height:0px;
        padding-bottom:0px;
    }

    #main form .row{
        position:relative;

    }

    #main form .row.error:after,
    #main form .row.success:after{
        content:'';

        position:absolute;
        right: 60px;
        top: 8px;
        width:32px;
        height:32px;
        background:url('../img/icons.png') no-repeat;
        margin-right:50px;
    }

    #main form .row.error:after{
        background-position: 0 -79px;
    }

    #main form input[name=email],
    #main form input[name=password]{

        border:none;
        background:url('http://www.playtimeboys.com/img/form/text-boxes.png') no-repeat top left;
        font:14px 'Segoe UI','Arial',sans-serif;
        color:#888;

        outline:none;

        height: 48px;
        margin-top:22px;
        margin-left:-10px;
        padding: 0 10px 0 50px;
        width: 350px;
    }



    #main form .email input{
        background-position:0 -96px;
    }

    #main form .email input:focus{
        background-position:0 -144px;
    }


    #main form .password input{
        background-position:0 -193px;
    }

    #main form .password input:focus{
        background-position:0 -241px;
    }



    /*----------------------------
        The Submit Button
    -----------------------------*/


    #main form input[type=submit]{

        border: 1px solid #004C9B;
        border-radius: 3px 3px 3px 3px;
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 1px rgba(0, 0, 0, 0.3);
        color: #D3EBFF;
        cursor: pointer;
        display: block;
        font: bold 24px Cambria,"Hoefler Text",serif;
        margin-top: -46px;
        margin-left:360px;
        padding-top: 7px;
        padding-bottom: 10px;
        text-shadow: 0 -1px 0 #444444;
        width: 100px;
        height:45px;
        position:absolute;
        z-index:100;

        background-color:#0496DA;

        background-image: linear-gradient(top, #0496DA 0%, #0067CD 100%);
        background-image: -o-linear-gradient(top, #0496DA 0%, #0067CD 100%);
        background-image: -moz-linear-gradient(top, #0496DA 0%, #0067CD 100%);
        background-image: -webkit-linear-gradient(top, #0496DA 0%, #0067CD 100%);
        background-image: -ms-linear-gradient(top, #0496DA 0%, #0067CD 100%);
    }

    #main form input[type=submit]:hover{

        background-color:#0383d3;

        background-image: linear-gradient(top, #0383d3 0%, #004c9b 100%);
        background-image: -o-linear-gradient(top, #0383d3 0%, #004c9b 100%);
        background-image: -moz-linear-gradient(top, #0383d3 0%, #004c9b 100%);
        background-image: -webkit-linear-gradient(top, #0383d3 0%, #004c9b 100%);
        background-image: -ms-linear-gradient(top, #0383d3 0%, #004c9b 100%);
        position:absolute;
        z-index:100;
    }

    #main form input[type=submit]:active{

        background-color:#026fcb;

        background-image: linear-gradient(top, #026fcb 0%, #004c9b 100%);
        background-image: -o-linear-gradient(top, #026fcb 0%, #004c9b 100%);
        background-image: -moz-linear-gradient(top, #026fcb 0%, #004c9b 100%);
        background-image: -webkit-linear-gradient(top, #026fcb 0%, #004c9b 100%);
        background-image: -ms-linear-gradient(top, #026fcb 0%, #004c9b 100%);
        position:absolute;
        z-index:100;
    }



    </style>
        </head>


    /*----------------------------
        The HTML
    -----------------------------*/


        <body>
            <div id="main">


                 <form action="login.php" method="post"  >

                    <div class="row email">
                        <input type="email" id="email" name="email" placeholder="Email" value="<?php echo htmlentities($email); ?>" />
                    </div>

                    <div class="row password">
                        <input type="password" id="password" name="password" placeholder="Password" value="<?php echo htmlentities($email); ?>" />
                    </div>
                    <input type="submit" name="submit" value="Login >"  />
                </form>
            </div>
        </body>
    </html>
4

1 回答 1

0

问题出在本节：

#main form input[name=email],
#main form input[name=password]{
    [...snip...]
    height: 48px;
    margin-top:22px;
    margin-left:-10px;
    padding: 0 10px 0 50px;
    width: 350px;
}

您的字段设置太宽；大写锁定图像通常显示在文本字段内。此外，内容框的高度太大，使通知器显得特别大。请尝试：

    height: 28px; // height of image - 20px
    margin-top:22px;
    margin-left:-10px;
    padding: 10px 10px 10px 50px; // extra 20px of padding on height
    width: 280px; // proper width of image, so contents don't overflow

要了解为什么会发生这种情况，请记住，即使您对文本文件进行了强硬的设计，它仍然存在于某个地方；一旦应用了样式，就很难看到底层文本字段的实际边界。如果您发现某些文本字段或其他表单小部件的格式正在起作用，则可以帮助禁用将它们从默认外观更改的样式，例如border:none;查看系统认为小部件的外观。从那里可以更容易地发现错误所在。

于 2012-12-24T18:46:17.457 回答