Ustawianie szerokości zakładki PRE w różnych przeglądarkach

Question

Istnieje sposób ustawiania szerokości strony PRE w Firefoksie i Operze, ale nie jest to dobrze znany sposób w IE lub Chrome, a twardy kod w tagach PRE cierpi w wyniku tego.

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

CSS 3 Text tab-size cechą jest też nowy (a nie prawie tyle znormalizowane), że widział szerokie wdrożenie tej pory (plus klapki nie są bardzo popularne w ogóle).

W przypadku kodu z twardymi kartami, po prostu przeprowadź konwersję między kartami, zanim umieścisz go na stronie.

Podstawowe układy są znacznie bardziej użyteczne niż zaokrąglonymi narożnikami

Tabs nigdy nie były przeznaczone do wykonywania zadań układu ogólnego przeznaczenia (i byłoby zupełnie nie nadają się do tego). W CSS3 można znaleźć bardziej rozbudowane funkcje układu - patrz na przykład Grid i Flexbox w IE10.

Answer 2

Według MDN za tab-size stronie, właściwy format:

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

JavaScript awaryjna:

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 
    }); 
});