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/Chrom 37 Obliczono zaokrąglenia
Wynik: http://i.imgur.com/DYor2yb.png
skrzypacz ten przedstawia problem z Chrome 37. Używanie oblicz (100% - 10px) funkcyjny element pikselami dziesiętnych, to zawsze zaokrągla w dół. To powoduje dziwne rzeczy.
W tym przykładzie zewnętrzny element div ma szerokość 50,5 piksela. Dwa wewnętrzne elementy div mają wartości calc (100% - 10px) i 10px jako szerokości. Mimo że powinno to być 50,5, wciąż pokazuje czerwone tło.
Problem wydaje się być wprowadzony w Chome 37. Czy ktoś wie, czy problem został już zgłoszony i/lub czy zostanie rozwiązany?
Edytuj: Rozumiem z komentarzy, że problem jest już obecny przez dłuższy czas. Czy istnieje jakiś (spoza przeglądarki) sposób, aby to naprawić?
Kwestia ta wydaje się być obecny w Chrome od obliczony został wdrożony [gdzieś pomiędzy wersją 23 i 26.] (http://app.crossbrowsertesting.com/public/i4fc93605bfe96a0/screenshots/zc4fbbf828e8096be866?size = small & type = windowed & browser_type = Chrome) Jest to problem w dotychczasowej wersji Chrome. – misterManSam
Ten problem nie ogranicza się tylko do jednostek "px". [Oto ten sam problem z 'em'] (http://jsfiddle.net/cps5b1vy/). ([To jest leniwy sposób obliczania jednostek em z px] (http://pxtoem.com/)) – misterManSam
Jak wyglądałoby ** pół piksela **? –