フォームの入力がパーセントのパディングを受け付けない

ピクセルのパディングが使用されているにもかかわらず、左と右のパーセンテージのパディングを使用している場合は、フォーム入力が正しく表示されます。なぜ私は理解できません。フォームの入力がパーセントのパディングを受け付けない

Firefox 3.5.3 OSXで壊れたSafariで動作します。

問題は、すべてのブレークは、パディング、私は割合パディングを使用するときにということである（したがって、入力値がきちんと整列していない理由。）

<!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>

出典

2009-09-18 Anonymous

それはIEとクロームのために働きます。 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>

出典

2009-09-18 21:18:16

ああ、http://doctype.comは、そのために特別に設計されているので、htmlの書式設定の質問に適しています。 –

残念ながら、doctypeはあまりにも扱いにくい設計です。それは「特別に設計された」ようではなく、何の理由もありません。 – arbales

のようなものですここでは、この：

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

UPDATE： バグが最終的に固定されています！ 2012-11-18 15:35 PST

出典

2011-08-12 22:15:19

Dah、これは修正する必要があります:(。ホープの人々が問題に投票することを願っています。 –

ブロックしているバグについて[投票]（https://bugzilla.mozilla.org/show_bug.cgi?id=716875）を確認してくださいそれはあまりにも。 –

うわー、それはほぼ3年されているとバグはまだそこにあります。 –

フォームの入力がパーセントのパディングを受け付けない

答えて

関連する問題