Jak działa funkcja calc(), jeśli zawiera wartości procentowe?

Question

Niedawno pojawiły się nieoczekiwane zachowania podczas projektowania układu strony. Zaskoczyło mnie, że zachowanie calc() wydaje się całkowicie zmieniać w zależności od tego, czy w jego argumentach istnieje jednostka oparta na procentach.

Oto minimalna reprodukcja.

.container { 
 
    font-size: 30px; 
 
    display: inline-block; 
 
    border: solid purple .1em; 
 
} 
 

 
.inner { 
 
    border: solid orange .1em; 
 
} 
 

 
.inner.em { width: 3em; } 
 
.inner.calc { width: calc(3em + 0%); }

<div class="container"> 
 
    <div class="inner em">abc</div> 
 
</div> 
 

 
<hr> 
 

 
<div class="container"> 
 
    <div class="inner calc">abc</div> 
 
</div>

Drugi dziwi mnie, bo bym się spodziewał, że calc(3em + 0%) byłby identyczny 3em. Jednak każda przeglądarka, którą przetestowałem, wykazuje takie zachowanie. To zachowanie występuje z dowolnym procentem. 0% nie jest wyjątkowy. Czy to część specyfikacji css?

Answer 1

specs for calc wyraźnie powiedzieć, że nie jest rozwiązany całkowicie w tym czasie:

Gdzie procentowe nie zostaną rozwiązane w wartości komputerowej, nie są one rozwiązany w "calc() wyrażenia, np "Calc (100% - 100% + 1em)" rozwiązuje "calc (0% + 1em)", a nie "oblicz (1em)". Jeśli istnieją specjalne reguły obliczania wartości procentowych w wartości (np. Właściwość "wysokość" ), mają one zastosowanie, gdy wyrażenie "calc()" zawiera wartości procentowe wynoszące .

Chciałbym nieśmiało spekulować, że 10,2:

Jeśli szerokość bloku zawierającego zależy od szerokości tego elementu, a następnie otrzymany układ jest niezdefiniowane w CSS 2.1.

stosuje się tutaj, ponieważ występuje procent, więc tak samo jak w przypadku bloku wewnętrznego, blok zewnętrzny stosuje skurcz do dopasowania.