usa la larghezza iniziale per l'elemento che non funziona in IE

107

Ho un plugin per grafici che inserisce la tela e una legenda <table>nel suo contenitore. In questo plugin tablenon è widthdefinito e nel mio CSS c'è una larghezza per le tabelle all'interno del contenitore dove viene inserito il mio plugin.

Quindi, il nuovo div eredita table{ width: 100%}dal CSS e il rendering è sbagliato.

Ho provato a usare width: initial;, sembra buono su Chrome ma a IE non piace ^{controllare la compatibilità del browser}

Ammetto di cambiare / forzare un CSS in linea nello script / plugin poiché deve funzionare in qualsiasi ambiente.

Qual è la soluzione migliore qui?

— Rikard
fonte

Hai provato a impostare solo una larghezza minima? Funziona?

— BuddhistBeast

@ BuddhistBeast, non ci ho pensato! Ma l'ho provato ora e non ha funzionato nemmeno su Chrome.

— Rikard

Risposte:

177

Come hai detto, generalmente width: autoavrà un effetto simile. Avere le regole:

.my-selector {
    width: auto;
    width: initial;
}

Dovrebbe causarne l'utilizzo initialse è supportato e in autoaltro modo.

— Mark Rhodes
fonte

Questo ha risolto il mio problema. Grazie.

— dchayka

Mi ha appena risparmiato un'ora. Grazie.

— Skitterm

Come nota, initial è un valore di proprietà valido ( developer.mozilla.org/en-US/docs/Web/CSS/initial ). Ma (se scorri verso il basso fino a "Compatibilità browser" nel link precedente), nessuna versione di IE lo supporta.

— gtramontina

questo è noto come fallback ed è un modello di codifica molto comune nei CSS. inoltre, l'utilizzo width: autonon solo avrà un effetto simile , ma avrà lo stesso identico effetto, perché autoè definito come il valore iniziale della widthproprietà.

— chharvey

Utilizzando width: auto;inline, all'interno dello script si risolve il problema su Chrome, FIrefox e IE 11. Non sono sicuro che esista un modo migliore.

— Rikard
fonte