Gli esterni div hanno una larghezza percentuale, mentre quelli interni div hanno display: tabel; width: 100%.: div di tabella con larghezza percentuale 1px bug
L'interno di div mostra 1px in meno rispetto a div esterno per alcune larghezze di pagina durante il ridimensionamento. Questo aggiunge una linea 1px a destra.
https://jsfiddle.net/afelixj/utcswLp1/1/
Esiste un fix per il bug?
Questo sembra essere un errore specifico webkit: https://bugs.webkit.org/show_bug.cgi?id=140371
La larghezza di un elemento display:table-* non è sempre correttamente calcolato se contenuti in un genitore il cui width non è definito mediante un'unità assoluta. Si può vedere questo problema in azione qui: guardare il lato destro di elementi rossi
È possibile risolvere questo problema in 2 modi diversi
display: table all'elemento contenitore. Questo in realtà non risolve il bug ma non dovrebbe essere più evidente (perché influenzerà anche l'elemento genitore).Cambia il tuo display:table a display:block.
Sto cercando una soluzione per questo bug. –
Il problema deriva dalla larghezza "60%" del contenitore.
Chrome tronca decimali (300.5 px diventerà 300 px).
Pertanto, quando l'interno div è impostato su "100%", è calcolato con la larghezza arrotondata del genitore div
Quindi, diciamo che div esterno è 300.5px (60% del totale).
Il div interno è calulato come 100% di 300 px;
Perché succede solo per 'display: table', e non per' display: block'? –
Perché 'display: block' occuperà l'intero spazio. Non importa quale sia il 'width'. Pertanto, non è calcolato. E quindi, non arrotondato. –
So che è piuttosto tardi, ma ecco una soluzione per questo bug che ho dovuto affrontare anche io.
Come menzionato in questa discussione il problema sta nell'uso della percentuale come unità di larghezza. Il browser arrotonda i decimali fino a un numero intero. Quindi tutto ciò che dobbiamo fare è aggiungere 1 pixel alla percentuale basata su. Possiamo farlo con calc:
width: calc(100% + 1px);
Questo funzionerà su tutti i principali browser tranne IE 11 e precedenti.
.wrap{
background: #000;
height: 400px;
width: 60%;
display:inline-table;}
basta cambiare il codice CSS in questo modo
Sto controllando in cromo versione più recente. Questo succede solo per alcune larghezze del browser. –
La stessa domanda è stata posta molte volte e puoi trovare la risposta se la cerchi solo su google. Dai un'occhiata a questo thread: http://stackoverflow.com/questions/26204771/css-display-table-width-100-missing-pixel – Kamelkent