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

Isso resolveu meu problema. Obrigado.

— dchayka

Só me salvou uma hora. Obrigado.

— Skitterm

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

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,

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