表单输入不会采取百分比填充(Form Input Won't Take Percentage

如果像素填充被使用，但使用左，右打破它的百分比填充我的表单输入正确显示。我想不通为什么。

它的工作原理在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>

Answer 1:

在灯架上有一个在这里开（在写作时）错误：

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

更新：该错误终于修好了！ 2012年11月18日15:35 PST

Answer 2:

它适用于IE和Chrome。只有火狐似乎并没有对我的工作。

我所知道的修复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>

文章来源: Form Input Won't Take Percentage Padding