Form Girişi Yüzde Doluluk Almaz

Piksel dolgu kullanılırsa form girdilerim düzgün görüntülenir, ancak sol ve sağ için yüzdelik dolgu kullanılır. Nedenini anlayamıyorum.Form Girişi Yüzde Doluluk Almaz

Firefox 3.5.3 OSX'de bozuk Safari'de çalışır.

sorun olduğunu ben bir yüzde dolgu, dolgu (giriş değeri güzel hizalanmamış dolayısıyla neden.) Tüm sonları

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

kaynak

2009-09-18 Anonymous

O IE ve krom için çalışır kullandığınızda. Sadece firefox benim için çalışmıyor gibi görünüyor. Bildiğim tek yolu ateş düzeltmek

tarihinde (yazma anda) hata açık bulunmaktadır

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

kaynak

2009-09-18 21:18:16

Oh, ve http://doctype.com, özel olarak tasarlanmış olduğundan, html biçimlendirme soruları için daha iyi bir yerdir. –

Maalesef, doctype işlemek için çok kötü tasarlanmış. Hiçbir sebepten farklı olarak "özel olarak tasarlanmış" görünmüyor. – arbales

(sadece doğru dolgu ile bir div içindeki metin kutusu sarma) böyledir burada bu:

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

GÜNCELLEME: böcek nihayet sabittir! 2012-11-18 15:35 PST

kaynak

2011-08-12 22:15:19

Dah, bunun düzeltilmesi gerekiyor :(. Umarım insanlar bu konuyu oylarlar. –

Engelleme sırasında oluşan hata için [oy] 'a (https://bugzilla.mozilla.org/show_bug.cgi?id=716875) emin olun. –

Vay be, neredeyse 3 yıl oldu ve böcek hala orada. Umarım sonunda düzelir. –

Form Girişi Yüzde Doluluk Almaz

cevap

İlgili konular