Configuración del ancho de la pestaña PRE en diferentes navegadores web

Question

Hay una manera de establecer el ancho de la pestaña PRE en Firefox y Opera, pero no hay una forma conocida de hacerlo en IE o Chrome, y el código en etiquetas PRE sufre como resultado.

pre { 
    white-space: -moz-pre-wrap; 
    white-space: -pre-wrap; 
    white-space: -o-pre-wrap; 
    white-space: pre-wrap; 
    word-wrap: break-word; 
    -moz-tab-size: 1.5em; 
    -o-tab-size: 1.5em; 

    margin: 1em 0 0 0; 
    padding: 1em 1em 1em 1em; 
    width: 65%; 
} 

Answer 1

La función de texto CSS 3 tab-size es demasiado nuevo (y no era lo suficientemente estandarizada) para haber visto un amplio despliegue hasta ahora (además de las pestañas no son muy populares en general).

Para el caso del código de pestañas fijas, simplemente ejecútelo mediante una conversión de pestañas a espacios antes de colocarlo en la página.

diseños básicos son mucho más útiles que las esquinas redondeadas

aquí nunca fueron destinados a realizar tareas de diseño de propósito general (y sería totalmente inadecuado para eso). Hay características de diseño más potentes que se promocionan para CSS3; consulte, por ejemplo, Grid y Flexbox en IE10.

Answer 2

De acuerdo a la página de MDN tab-size, el formato correcto es:

tab-size: 4; 
-moz-tab-size: 4; 
-o-tab-size: 4; 

JavaScript retorno:

var fix_tab_size = function(pre, size) { 
    if(typeof fix_tab_size.supports === 'undefined') { 
     var bs = document.body.style; 
     fix_tab_size.supports = ('tab-size' in bs || '-o-tab-size' in bs || '-ms-tab-size' in bs || '-moz-tab-size' in bs); 
    } 
    if(!fix_tab_size.supports) { 
     if(typeof pre.each === 'function') { //jquery 
      $('pre').each(function() { 
       var t = $(this); 
       t.html(t.html().replace(/\t/g, new Array(size+1).join(' '))); 
      }); 
     } else if(typeof pre.innerHTML === 'string') { 
      pre.innerHTML = pre.innerHTML.replace(/\t/g, new Array(size+1).join(' ')); 
     } 
    } 
} 
$(function() { 
    fix_tab_size($('pre'),4); 
    //or 
    $.getJSON(src, function(data) { 
     fix_tab_size($data_pre.html(data.code)); //etc 
    }); 
});