在不同的網絡瀏覽器中設置PRE選項卡寬度

有一種方法可以在Firefox和Opera中設置PRE選項卡寬度，但在IE或Chrome中不存在以知名方式執行此操作的問題，PRE標籤中的硬標籤代碼結果遭受損失。在不同的網絡瀏覽器中設置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%; 
}

來源

2011-07-13 mcandre

爲什麼沒有這一點，塊垂直方向的CSS3中心微不足道？基本佈局比圓角更有用。 – mcandre

-1

的CSS 3文本特徵tab-size太新（，幾乎沒有標準化不夠），以迄今所看到的廣泛部署（加標籤並不是很受歡迎，在一般）。

對於硬標籤代碼的情況，只需在將它放在頁面上之前通過製表符轉換爲空格轉換即可。

基本佈局是不是圓角

標籤從來沒有打算做通用的佈局任務（並會完全不適合於）更爲有用。有更強大的佈局功能被CSS3吹捧 - 例如IE10中的Grid和Flexbox。

來源

2011-07-13 23:28:20 bobince

-1：對於「硬間隔」代碼，同樣有很多（如果不是更多）參數。 –

-1因爲使用選項卡進行編碼並在您喜歡的編輯器中設置製表符比使用空格更具視覺吸引力和方便性。 – OneOfOne

根據MDN的tab-size頁面，正確的格式是：

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-14 13:42:11 OneOfOne

Bummer認爲Opera永遠不會看到標準的標籤寬度樣式。安息。 – ThorSummoner

我不使用Opera，但最新的Opera使用Blink，Google的webkit分支，所以它可能會支持它。 – OneOfOne

澄清，我的意思是基於Pesto的歌劇，12.x已經停止支持只有-o-tab-width聲明。基本上意味着我們的Opera用戶（主要在Linux上）幾乎不會看到標籤大小的樣式，除非開發人員複製這個示例並決定包含特定於Opera的規範。 – ThorSummoner

在不同的網絡瀏覽器中設置PRE選項卡寬度

回答

相關問題