CSS: come fare in modo che i bambini si adattino alla larghezza del genitore

Question

Creo l'elemento genitore con un numero di elementi div per i bambini che quindi calcolerò la larghezza in JavaScript, in base all'attributo data-value.

Se si somma la larghezza calcolata per tutti i bambini, il risultato sarà 100%. Ma per qualche motivo i bambini non occuperebbero il 100% della larghezza del genitore: una porzione di pixel bianchi appare subito dopo l'ultimo figlio.

Si tratta di un violino che illustra questo: http://jsfiddle.net/tqVUy/42/

Chrome e Firefox lo rendono bene, mi faccia questo problema in Safari e Opera (vedi l'immagine qui sotto).

Oltre a ciò, overflow proprietà non funziona come previsto, come elementi di bambini si sovrappongono il genitore div (di nuovo, rilevante solo in Safari e Opera).

Domande:

1. C'è altro (a destra) modo per rendere i bambini genitore in forma?
2. Angoli arrotondati e overflow: hidden per il genitore, posso farlo sembrare uguale su tutti i browser?

Answer 1

css Aggiunto:

#component>div{height:100%;} 
#component>div:first-of-type{border-radius:30px 0 0 30px;} 
#component>div:last-of-type{border-radius: 30px;} 

Edit in js:

$('#component').children().not(':last').each(function() { 

Cosa succede:
L'ultima div non galleggiare a sinistra e riempirà solo lo spazio rimasto. Ho aggiunto angoli arrotondati al primo e all'ultimo div per risolvere il problema dell'angolo. l'ultimo div ha un raggio 30px in ogni angolo, perché il div è actualy dietro gli altri div (potete vedere questo con Inspect Element)

Demo:
http://jsfiddle.net/tqVUy/48/

Answer 2

Devo affrontare anche questo tipo di problema. Ecco perché definire il raggio di confine anche per il bambino. Scrivere in questo modo:

#component > div:first-child{ 
    border-radius:30px 0 0 30px; 
} 
#component > div:last-child{ 
    border-radius:0 30px 30px 0; 
} 

Scegli questa http://jsfiddle.net/tqVUy/49/