Ввод формы не займет процентное заполнение - PullRequest
Новая
       20

Ввод формы не займет процентное заполнение

9 голосов
/ 19 сентября 2009

Входные данные моей формы отображаются правильно, если используется заполнение пикселями, но использование отступа в процентах для левого и правого каналов нарушает его. Я не могу понять, почему.

Работает в Safari, не работает в Firefox 3.5.3 OSX.

Проблема в том, что когда я использую процентное заполнение, заполнение все разрывается (следовательно, почему входное значение не выравнивается должным образом.) 

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
        <title>% padding</title>  
        <style>
    html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
        margin:0;
        padding:0;
        border:none;

    }

    div.content {
        width:50%;
        margin:0 auto;
        background:#eee;
    }
    div.content form {
        width:100%;
    }
        div.content form ul {
            list-style:none;
            margin:0;
            width:100%;
        }
        div.content form li {
            position:relative;
            margin-bottom:20px;
            height:64px;
            width:100%; /*  width is declared */
        }
        div.content form li label {
            position:absolute;
            width:auto;
            left:0;
            top:0;
            line-height:20px;
        }
        div.content form li .text {
            position:absolute;
            bottom:0;
            left:0;
            padding:10px 2%; /* if 2% is changed to 2px the padding works correctly */
            width:96%;
            font-size:14px;
            outline:1px solid #ccc;
        }
    </style>
</head>
<body>
    <div class="content">
    <form action="" method="get">
        <ul>
            <li>
                <label for="text">Input</label>
                <input type="text" class="text" name="text" value="" />
            </li>
            <li>
                <label for="text">Input</label>
                <input type="text" class="text" name="text" value="" />
            </li>
            <li>
                <label for="text">Input</label>
                <input type="text" class="text" name="text" value="" />
            </li>

        </ul>
    </form>
    </div>
</body>
</form>

Ответы [ 2 ]

5 голосов
/ 13 августа 2011

Здесь есть открытая (на момент написания) ошибка:

https://bugzilla.mozilla.org/show_bug.cgi?id=527459

UPDATE: Ошибка наконец исправлена! 2012-11-18 15:35 PST

1 голос
/ 19 сентября 2009

Работает для IE и Chrome. Кажется, только Firefox не работает для меня.

Единственный известный мне способ исправить это в Firefox - это так (просто оборачивая текстовое поле внутри div с правильным заполнением) 

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
        <title>% padding</title>  
        <style>
    html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
        margin:0;
        padding:0;
        border:none;

    }

    div.content {
        width:50%;
        margin:0 auto;
        background:#eee;
    }
    div.content form {
        width:100%;
    }
        div.content form ul {
            list-style:none;
            margin:0;
            width:100%;
        }
        div.content form li {
            position:relative;
            margin-bottom:20px;
            height:64px;
            width:100%; /*  width is declared */
        }
        div.content form li label {
            position:absolute;
            width:auto;
            left:0;
            top:0;
            line-height:20px;
        }
        div.content form li .text {
            position:absolute;
            bottom:0;
            left:0;
            padding:10px 2%; /* if 2% is changed to 2px the padding works correctly */
            width:96%;
            font-size:14px;
            outline:1px solid #ccc;
        }
        div.content form li .textbox {
            position:absolute;
            bottom:0;
            left:0;
            padding:10px 2%; /* if 2% is changed to 2px the padding works correctly */
            width:96%;
            font-size:14px;
            outline:1px solid #ccc;
            border:1px solid #ccc;
            background-color:white;
        }

        .textbox {
            width:100%;
            border:solid 1px white;
        }
    </style>
</head>
<body>
    <div class="content">
    <form action="" method="get">
        <ul>
            <li>
                <label for="text">Input</label>
                <div class='text'>
                    <input type="text" class="textbox" name="text" value="" />
                </div>
            </li>
            <li>
                <label for="text">Input</label>
                <div class='text'>
                    <input type="text" class="textbox" name="text" value="" />
                </div>
            </li>
            <li>
                <label for="text">Input</label>
                <div class='text'>
                    <input type="text" class="textbox" name="text" value="" />
                </div>
            </li>

        </ul>
    </form>
    </div>
</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...