use el ancho inicial para el elemento que no funciona en IE

107

Tengo un complemento de gráfico que inserta un lienzo y una leyenda <table>en su contenedor. En este complemento, tableno tiene widthdefinido y en mi CSS hay un ancho para las tablas dentro de ese contenedor donde se inserta mi complemento.

Entonces, el nuevo div está heredando table{ width: 100%}del CSS y se está representando mal.

Traté de usar width: initial;, se ve bien en Chrome pero a IE no le gusta que ^{verifique la compatibilidad del navegador}

Admito cambiar / forzar un CSS en línea en el script / complemento ya que tiene que funcionar en cualquier entorno.

¿Cuál es la mejor solución aquí?

css internet-explorer cross-browser width Rikard
fuente

¿Ha intentado simplemente establecer un ancho mínimo? ¿Funciona?

BuddhistBeast

@BuddhistBeast, ¡no pensé en eso! Pero lo intenté ahora y tampoco funcionó en Chrome.

Rikard

Respuestas:

177

Como dijiste, generalmente width: autotendrá un efecto similar. Tener las reglas:

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

Debería hacer que se use initialsi es compatible y de autootro modo.

Mark Rhodes
fuente

Esto solucionó mi problema. Gracias.

dchayka

Sólo me salvó una hora. Gracias.

Skitterm

Como nota, initial es un valor de propiedad válido ( developer.mozilla.org/en-US/docs/Web/CSS/initial ). Pero (si se desplaza hacia abajo hasta "Compatibilidad del navegador" en el enlace anterior), ninguna versión de IE lo admite.

gtramontina

esto se conoce como respaldo y es un patrón de codificación muy común en CSS. Además, el uso width: autono solo tendrá un efecto similar , sino que tendrá exactamente el mismo efecto, porque autose define como el valor inicial de la widthpropiedad.

chharvey

El uso en width: auto;línea, dentro de la secuencia de comandos, resuelve el problema en Chrome, FIrefox e IE 11. No estoy seguro de si hay una mejor manera.

Rikard
fuente