html - pagina - ¿Cómo puedo evitar este error de diseño de IE11 relacionado con la celda de tabla, la decoración de texto y el relleno?

html5 en internet explorer

Question

Parece que he tropezado con un molesto error de diseño de Internet Explorer 11 . (Ugh, pensé que estos días habían quedado atrás).

En el siguiente ejemplo, el relleno de la celda de la tabla derecha desaparece cuando pasas el cursor sobre él en IE11: http://jsfiddle.net/xx4Z4/

Esto parece surgir debido a un escenario de CSS increíblemente específico:

• El elemento usa display: table-cell
• El elemento usa relleno basado en porcentaje, por ejemplo, padding: 0 5%
• Un subelemento agrega text-decoration: underline cuando el elemento principal está sobrevolado

Si cambias cualquiera de estas tres cosas, el problema desaparece.

Esto parece ser un error IE11, pero me pregunto: ¿Alguien puede pensar en una solución para este problema sin abandonar la display: table-cell y relleno basado en porcentaje?

Answer 1

Agregar bordes superiores e inferiores invisibles parece solucionar el problema.

a {
  border: solid rgba(0,0,0,0);
  border-width: thin 0;
}

Esto evita que los anclajes se muevan al pasar el mouse o enfocar.

Utilizo rgba(0,0,0,0) lugar de transparent para una mejor compatibilidad con IE antiguo que muestra color transparent mientras que rgba se vuelve inválido y no se muestra en absoluto.

Answer 2

De nuevo, un problema IE11 que parece tan inusual. Veo que el porcentaje de relleno ni siquiera se calcula y no se aplica en el layout . Sin embargo, el texto sigue rellenado de acuerdo con el porcentaje de relleno. Así que supongo que el texto está posicionado con el relleno, pero después del posicionamiento el porcentaje de relleno está "deshabilitado".

No puedo decirte por qué sucede esto. Pero si realmente quieres arreglar esto, tal vez quieras utilizar estas soluciones rápidas.

Margen de uso

Debido a que el error porcentual solo se produce en el relleno de una celda de tabla, en realidad puede usar un margen en el mismo tramo.

span 
{
    margin-left: 10%;
}

y por supuesto restablecer el relleno de los lados:

div.table-cell {
    display: table-cell;
    padding: 20px 0;
}

Esta "solución" no es tan dinámica como con el porcentaje de relleno en la celda de la tabla.

Por qué no?
Es porque el porcentaje toma el valor de su elemento principal, la celda de la tabla. Donde como la celda de la tabla tomó su valor porcentual basado en la tabla. Ahora cuando solo left-margin: 5%; . Sería la mitad del espacio como debería ser. Esto es porque toma el 10% en el ancho de la celda de la tabla. Donde el ancho de la celda de la tabla es el ancho de la tabla dividido por sus celdas ( table width / table cell ).

Entonces, para solucionarlo, hice 5 veces la cantidad de células ( 5 * 2 en este caso), lo que daría como resultado el porcentaje correcto.

Sin embargo, esto no es dinámico cuando desea agregar más celdas.

jsFiddle

Usar borde

Use el borde cuya posición esté "reservada" antes de que se restablezca el relleno.

Borde reservado

span 
{
     border-bottom: 1px solid transparent;   
}

Cambiar propiedad que no necesita volver a calcular la posición; color

div.table-cell-bug:hover span 
{
    border-bottom-color: black; 
}

Ahora tenga en cuenta que todavía no habrá relleno en el diseño. Tan pronto como se asigna una propiedad que no se ha calculado antes de que se restablezca el relleno (al mismo tiempo que se determina la posición del texto), las posiciones se volverán a calcular.

jsFiddle

Espero que una de estas soluciones rápidas te funcione.

Veo que enviaste un informe de error a MS . Manténganos actualizados cuando recibas una respuesta, te agradecería :)

Answer 3

Esto se puede resolver de forma "útil" configurando las reglas css de pads como esta ->

element:hover,
        element:active,
        element:focus  {
            // padding example
            padding-left: 1.5%;
        }

Recuerda establecer esto solo para IE ya que puede hacer que todos los navegadores normales se comporten como una discoteca.

EDITAR: Flexbox funciona para IE 10 y superior, por lo que esta "solución" solo es necesaria, por ejemplo, 9 o menos.

Answer 4

Extraño, nadie mencionó para establecer table-layout: fijo; Es realmente importante, de lo contrario, el ancho / relleno no se calculará correctamente en IE (y algunos otros efectos secundarios extraños, dependiendo del caso de uso), especialmente cuando está usando imágenes dentro de él.

<style>
  .table { display:table; table-layout:fixed; }
  .table-cell { display:table-cell; }
</style>

<div class="table">
  <div class="table-cell"></div>
  <div class="table-cell"></div>
  <div class="table-cell"></div>
</div>

Answer 5

Todas estas son realmente buenas respuestas, y la opción de consulta de medios funciona bien para identificar solo IE que tiene este problema con la display:table-cell

Lo que hice que encontré funcionó bien fue emplear vertical-alinear como una gran manera de dirigir el texto que figura en la display:table-cell elemento de display:table-cell a donde yo quería que residiera. Por lo general, vertical-align no hace mucho para formatear, A MENOS que esté en una tabla.

Aquí está mi HTML simplificado:

<li id="table-cell-element">
   <a href="#">
      <img src="event.png"/>
      <small>Register for Event</small>
   </a>
</li>

Y aquí está el CSS:

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    li {vertical-align:middle; display:table-cell; width:15%; font-size:1.2em; line-height:1.2em; padding:2%; margin:0;} 
    li a {display:inline-block;} 
    li img {display:inline-block; vertical-align:middle; padding-right:5px; float:left; max-with:30px;}
    small {display:block; font-size:60%; font-weight:bold; color:#333;}
}

También puede tener que ajustar la li a:hover {line-height} dependiendo de lo que hay en su CSS para esos elementos

Además, si desea que esto funcione para IE 9 y posterior, le sugiero que utilice comentarios condicionales que agreguen una clase "ie" a la etiqueta <html> y luego creen una hoja de estilo IE9. Afortunadamente, el estilo requerido para IE9 es relativamente el mismo. Pero solo probé con IE9 y no estoy seguro de sus resultados para IE8 e IE7.

Answer 6

Tuvimos un escenario similar en el que ninguna de las soluciones anteriores funcionó.

En su lugar, animamos el ancho de nuestro div afectado una vez que la página se ha cargado:

if (!!navigator.userAgent.match(/Trident//7/./)){
            $("#karina-rosner2").animate({''width'': ''20.1%''},1);     
            $("#karina-rosner2").animate({''width'': ''20%''},1);   
}

Esto obliga a IE11 a recalcular el valor de relleno relativo de div y resolvió bien nuestro problema.