9
<div id="outerDiv">
<div id="innerDiv"></div>
<div id="remainderDiv"></div>
</div>
#outerDiv, #innerDiv, #remainderDiv{
height: 100px;
}
#outerDiv{
width: 55.5px;
z-index: 1;
background-color: red;
}
#innerDiv{
width: calc(100% - 10px);
z-index: 100;
background-color: blue;
float: left;
}
#remainderDiv{
width: 10px;
z-index: 100;
background-color: green;
float: left;
}
http://jsfiddle.net/yz8cwj3a/Chrome 37 calc arrotondamento
risultati: http://i.imgur.com/DYor2yb.png
Questo violino mostra un problema con Chrome 37. Uso del calc (100% - 10px) funzione su un elemento con pixel decimali, sempre Arrotonda. Questo causa strane cose.
Nell'esempio, il div esterno ha una larghezza di 50.5 px. I due div interni hanno calc (100% - 10px) e 10px come larghezze. Anche se questo dovrebbe essere 50,5 in totale, mostra ancora lo sfondo rosso.
Il problema sembra essere introdotto in Chome 37. Qualcuno sa se questo problema è già stato segnalato e/o se sarà risolto?
Modifica: Capisco dai commenti che il problema è già presente per un tempo più lungo. C'è un modo ordinato (cross-browser) per risolvere questo?
Questo problema sembra essere stato presente in Chrome dal calc è stata attuata [a volte tra la versione 23 e 26.] (http://app.crossbrowsertesting.com/public/i4fc93605bfe96a0/screenshots/zc4fbbf828e8096be866?size = small & type = windowed & browser_type = Chrome) È un problema in ogni versione di Chrome fino ad ora. – misterManSam
Questo problema non è solo limitato alle unità 'px'. [Ecco lo stesso problema con 'em'] (http://jsfiddle.net/cps5b1vy/). ([Questo è il modo pigro per calcolare le unità em da px] (http://pxtoem.com/)) – misterManSam
Cosa sarebbe ** un mezzo pixel **? –