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?


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.


3
Questo ha risolto il mio problema. Grazie.
dchayka

2
Mi ha appena risparmiato un'ora. Grazie.
Skitterm

2
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

4
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

6

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.

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.