Ho imparato a conoscere la funzione CSS calc() e il suo fantastico. Ho provato ad usarlo come:Perché la funzione calc() CSS non funziona per me?
#abc{width:calc(100%-20px)}
Ma il problema con questa funzione è che non funziona. Ho provato questo codice IE9 e Safari e non ha funzionato.
Perché non funziona?
È supportato da IE9, IE10 e Safari 6.0 (utilizzando -webkit- prefisso). È possibile controllare tutto il tavolo supporto qui: http://caniuse.com/#feat=calc
con modernizr è possibile verificare se il browser supporta questa funzionalità e se non fa fallback su javascript o su un altro stile http://modernizr.com/ –
È solo per me o dimentica di menzionare l'uso del prefisso sul caniuse pagina? – csilk
L'operatore “-” deve essere circondato da spazi:
#abc{width:calc(100% - 20px)}
Citando MDN info on calc(): “Nota: Il + e - gli operatori devono essere sempre circondati da spazi bianchi. L'operando di calc (50% -8px) per esempio verrà analizzato come percentuale seguita da una lunghezza negativa, un'espressione non valida, mentre l'operando di calc (50% - 8px) è una percentuale seguita da un segno meno e una lunghezza . "
La dichiarazione formale su questo è in clause 8.1.1 del modulo CSS Valori e unità di livello 3 CR.
Con l'ultima versione di Modernizr è possibile controllare il supporto csscalc. Basta usare Modernizr.csscalc. Questa funzione restituirà true se è supportata e false se non lo è. Nel tuo caso si avrebbe questo nel vostro css:
#abc { width:calc(100% - 20px); }
e nella vostra javascript (sto usando jQuery qui)
if(!Modernizr.csscalc){
$('#abc').width($(PARENT_EL).width() - 20)
}
BTW. È meglio dare uno stile ai tuoi elementi con i nomi delle classi piuttosto che con l'ID. L'ID di un elemento deve essere utilizzato esclusivamente per il targeting tramite javascript.
Ottima risposta per gestire il calcolo della larghezza css in Safari v5.1.7 :)) – ss888
Tutti i browser moderni eccetto il supporto browser nativo di Android calc() che ne facilitano l'adozione. Tuttavia, si noti che può avere un grande impatto sul layout e la conseguente interruzione della progettazione su browser non supportati.
Si consiglia di utilizzarlo con una dichiarazione di fallback, in modo da non interrompere i browser che non lo supportano.
width: 500px; /** older browsers **/
width: -webkit-calc(50% - 20px); /** Safari 6, Chrome 19-25 **/
width: -moz-calc(50% - 20px); /** FF 4-15 **/
width: calc(50% - 20px); /** FF 16+, IE 9+, Opera 15, Chrome 26+, Safari 7 and future other browsers **/
E 'sia corretto che IE9 supporta calc CSS() e che devi mettere gli spazi intorno ad un minus in Calc.
Pur sapendo che ho appena avuto un problema molto simile con IE9, dove width: 50% ha prodotto un risultato diverso da width: calc(50%). Si è scoperto che aveva a che fare con il tipo display impostato su inline-table. Modificandolo su inline-block reso calc() si lavora di nuovo. Notare che http://caniuse.com/#feat=calc contrassegna il supporto di IE9 calc() come "parziale".
L'implementazione di IE9 del metodo calc() non funziona su elementi che sono display: table.
È possibile aggirare il problema avvolgendo un div attorno a esso (ovvero display: block) e rendendo la larghezza dell'elemento display: table all'interno di width: 100%. Si applica la larghezza calc alla circostante div.
Sono necessari spazi e anche se si utilizza il formato del preprocessore come questo calc(~"100% - 20px") o potrebbe non funzionare.
Prima di tutto, devono essere presenti spazi prima e dopo + o -. Puoi anche utilizzare *, / e combinarli. Vedere esempio:
.gen {
height: 100px;
background-color: blue;
border: solid 1px black;
}
.nocalc {
width: 50%;
}
.calc {
width: calc(100%/4 * 2 + 50px - 40px);
/* 50% + 10px */
}<div class="gen nocalc"></div>
<div class="gen calc"></div>Funziona con display: table, ma non funziona con display: table-row (riga prende tutto lo spazio) e non funziona con display: table-cell (se una cella ci vuole intero spazio; se più - ogni cella occupa spazio in base al suo contenuto).
.cont-1 {
background-color: yellow;
}
.cont-2 {
background-color: red;
border: solid 1px black;
}
.width-m-50 {
width: calc(100% - 20px);
height: 100px;
}
.tab-simple {
display: table;
}
.tab {
display: table;
border: solid 1px black;
background-color: yellow;
width: 100%;
}
.tab-row {
display: table-row;
}
.tab-cell {
display: table-cell;
}<div class="cont-1">
<div class="cont-2 width-m-50">
div with width: calc(100% - 20px);
</div>
</div>
<div class="cont-1">
<div class="cont-2 tab-simple width-m-50">
tab with width: calc(100% - 20px);
</div>
</div>
<h3> tab with width 100% and two cells, 1-st with width calc(100% - 20px); 2-nd without: </h3>
<div class="tab">
<div class="tab-row">
<div class="cont-2 tab-cell width-m-50">
cell
</div>
<div class="cont-2 tab-cell">
cell
</div>
</div>
</div>Affinché la funzione di lavorare è necessario avere spazi tra il segno dell'operatore.
Ad esempio:
#abc{
width: calc(100% - 20px)
}
Il calc() article fornisce una ulteriore spiegazione dettagliata del problema.
Controllare [questa tabella compatibile] (http://caniuse.com/#feat=calc). – Passerby