10

Firefox と Opera で PRE タブ幅を設定する方法はありますが、IE や Chrome でこれを行う方法はよく知られていないため、結果として PRE タグのハードタブ コードに問題が生じます。

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%;
}
4

2 に答える 2

7

MDN のタブサイズのページによると、適切な形式は次のとおりです。

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

JavaScript フォールバック:

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
    });
});
于 2013-09-14T13:42:11.693 に答える
-2

CSS 3 Text 機能tab-sizeは新しすぎて (そして十分に標準化されていないため)、これまでのところ広く展開されていません (さらに、タブは一般的にあまり人気がありません)。

ハードタブ コードの場合は、ページに配置する前に、タブからスペースへの変換を実行するだけです。

基本的なレイアウトは、角を丸くするよりもはるかに便利です

タブは、汎用レイアウト タスクを実行することを意図したものではありません (そして、それにはまったく適していません)。CSS3 向けに宣伝されている、より強力なレイアウト機能があります。たとえば、IE10 の Grid と Flexbox を参照してください。

于 2011-07-13T23:28:20.233 に答える