INPUT border box a ridimensionamento box con altezza e larghezza del 100% all'interno del problema TD in Chrome

Question

Ho trovato un caso quasi identico al mio here. Ma la risposta accettata non funziona per me quindi spero sia giusto che io faccia una nuova domanda.

Il pic di seguito è ciò che voglio ottenere in tutti i principali browser (almeno IE8 +, Firefox e Chrome). Gli INPUT posizionati all'interno dei TD riempiono i genitori sia della larghezza che dell'altezza.

Il mio problema è che non riesco a farlo fare in Chrome con frammento di codice di seguito. Grazie in anticipo

AGGIORNAMENTO: Il mio problema su Chrome ha spiegato: Se osservi da vicino, c'è una spaziatura di 1 o 2 pixel in alto e in basso. This is me su Chrome versione 47.0.2526.111 m su Windows 7 (Si prega di open in nuove finestre per vedere più chiaro)

UPDATE2: Grande errore sul campione. I DIV adattano bene il loro genitore senza usare il ridimensionamento della scatola. Quello che voglio veramente è l'INPUT per adattare anche il loro genitore. Ho appena aggiornato di nuovo lo snippet di codice.

table { 
 
    border-collapse: collapse; 
 
    width: 100% 
 
} 
 
td { 
 
    height: 100px; 
 
    border: 1px #ccc solid; 
 
} 
 
input { 
 
    border: 1px #ccc solid; 
 
    height: 100%; 
 
    width: 100%; 
 
    box-sizing: border-box;   /* works fine with IE8+ */ 
 
    -moz-box-sizing: border-box;  /* works fine Firefox */ 
 
    -webkit-box-sizing: border-box; /* height is not correct in Chrome */ 
 
/*-webkit-box-sizing: content-box; width is not correct in Chrome */ 
 
}

<table> 
 
    <tr> 
 
    <td> 
 
     <input type="text" value="this INPUT need to adapt to its parent TD"> 
 
    </td> 
 
    </tr> 
 
</table>

Answer 1

In realtà sto cercando la risposta a questa domanda per un bel tempo (dal 2014). Trovandosi in internet alcuni post dicono che questo è un bug di Chromium. Sono riuscito a richiamare un link here. Nondimeno, dubito che ci sarà una risposta presto.

Nel frattempo, vorrei proporre una soluzione rapida e sporca per chiunque abbia avuto lo stesso problema di me: per il chrome, avvolgere tutti gli INPUT all'interno di un DIV.

$(function() { 
 
    
 
    // if agent is of Chrome 
 
    var isChrome = /chrom(e|ium)/.test(navigator.userAgent.toLowerCase()); 
 
    
 
    if (isChrome) { 
 
    $("table td>:input").wrap($("<div>", {"class": "input-container"})); 
 
    } 
 
});

table { 
 
    border-collapse: collapse; 
 
    width: 100% 
 
} 
 
td { 
 
    height: 100px; 
 
    border: 1px #ccc solid; 
 
} 
 
input { 
 
    border: 1px #ccc solid; 
 
    height: 100%; 
 
    width: 100%; 
 
    box-sizing: border-box;   /* works fine with IE8+ */ 
 
    -moz-box-sizing: border-box;  /* works fine Firefox */ 
 
/*-webkit-box-sizing: border-box;  height is not correct in Chrome 
 
*-webkit-box-sizing: content-box; width is not correct in Chrome */ 
 
} 
 
div.input-container { 
 
    height: 100%; 
 
    width: 100%; 
 
    -webkit-box-sizing: border-box; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <td> 
 
     <input type="text" value="this INPUT need to adapt to its parent TD"> 
 
    </td> 
 
    </tr> 
 
</table>

Answer 2

Questo è uno strano, ma penso che ciò che state vedendo è un td con un'altezza fissa di 100px, e larghezze di confine sulla parte superiore e inferiore di 1px gettando via il bambino div s calcolo del 100% dell'altezza.

Sarebbe possibile assegnare l'altezza a div anziché a td come di seguito? Questo funziona per me in chrome.

table { 
 
    border-collapse: collapse; 
 
    width: 100% 
 
} 
 
td { 
 
    border: 1px #ccc solid; 
 
} 
 
div { 
 
    border: 1px #ccc solid; 
 
    height: 100px; 
 
    width: 100%; 
 
    box-sizing: border-box;   /* works fine with IE8+ */ 
 
    -moz-box-sizing: border-box;  /* works fine Firefox */ 
 
    -webkit-box-sizing: border-box; /* height is not correct in Chrome */ 
 
/*-webkit-box-sizing: content-box; width is not correct in Chrome */ 
 
}

<table> 
 
    <tr> 
 
    <td> 
 
     <div>BOX1</div> 
 
    </td> 
 
    <td> 
 
     <div>BOX2</div> 
 
    </td> 
 
    <td> 
 
     <div>BOX3</div> 
 
    </td> 
 
    </tr> 
 
</table>

Answer 3

perché non usare semplice css layout piuttosto che fare un over uccidono con le tabelle?

Fiddle

html, 
body { 
    width: 100%; 
    height: 100%; 
    margin: 0; 
    padding: 0; 
} 

.container { 
    width: 100%; 
} 

.padding { 
    height: 100px; 
} 

.outer_border { 
    padding: 1px; 
    border: 1px solid black; 
} 

input { 
    border: 1px black solid; 
    height: 100%; 
    width: 100%; 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
} 

HTML

<div class="container"> 
    <div class="outer_border"> 
    <div class="padding"> 
     <input type="text" value="this INPUT need to adapt to its parent TD"> 
    </div> 
    </div> 
</div>