use largura inicial para o elemento que não funciona no IE

107

Eu tenho um plugin gráfico que insere tela e uma legenda <table>em seu contêiner. Neste plugin o tablenão foi widthdefinido e no meu CSS existe uma largura para as tabelas dentro daquele container onde meu plugin é inserido.

Portanto, o novo div é herdado table{ width: 100%}do CSS e renderizado incorretamente.

Tentei usar width: initial;, parece bom no Chrome, mas o IE não gosta, verifique a compatibilidade do navegador

Admito alterar / forçar um CSS embutido no script / plugin, já que tem que funcionar em qualquer ambiente.

Qual é a melhor solução aqui?

Rikard
fonte
Você já tentou definir uma largura mínima? Funciona?
BuddhistBeast
@BuddhistBeast, não pensei nisso! Mas tentei isso agora e também não funcionou no Chrome.
Rikard

Respostas:

177

Como você disse, geralmente width: autoterá um efeito semelhante. Tendo as regras:

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

Deve fazer com que seja usado initialse for compatível e de autooutra forma.

Mark Rhodes
fonte
3
Isso resolveu meu problema. Obrigado.
dchayka
2
Só me salvou uma hora. Obrigado.
Skitterm
2
Como observação, initial é um valor de propriedade válido ( developer.mozilla.org/en-US/docs/Web/CSS/initial ). Mas (se você rolar para baixo até "Compatibilidade do navegador" no link anterior), nenhuma versão do IE oferece suporte para isso.
gtramontina
4
isso é conhecido como fallback e é um padrão de codificação muito comum em CSS. além disso, o uso width: autonão terá apenas um efeito semelhante , mas terá exatamente o mesmo efeito, porque autoé definido como o valor inicial da widthpropriedade.
chharvey,
6

Usar width: auto;inline, dentro do script resolve o problema no Chrome, FIrefox e IE 11. Só não tenho certeza se existe uma maneira melhor.

Rikard
fonte