制表符宽度 CSS 属性

Question

WebKit 和 Microsoft 浏览器是否支持像 Firefox 和 Opera 使用 -moz-tab-size 和 -o-tab-size 属性指定制表符宽度的任何方法？

例如，我希望 </code> 中的选项卡宽度为 4 个空格：

textarea {
    -moz-tab-size: 4;
    -o-tab-size: 4;
    /* How would I do this in Chrome, Safari, and IE? */
}

[更新：]

我创建了一个 tab-size polyfill ( 演示）：

<script> // tab-size polyfill
var codeElements = document.getElementsByTagName('code'), // Applies to all code elements. Adjust to your needs.
codeElementCount = codeElements.length,
e = d.createElement('i');

if(e.style.tabSize !== '' && e.style.mozTabSize !== '' && e.style.oTabSize !== '') {
    for(var i = 0; i < codeElementCount; i++) {
        codeElements[i].innerHTML = codeElements[i].innerHTML.replace(/\t/g,'<span class="tab">&#9;</span>');
    }
}
</script>

<style>
.tab {
    width: 2.5em; /* adjust to your needs */
    display: inline-block;
    overflow: hidden;
}
</style>

注意：这不适用于</code>，但仅限于可以包含其他元素的元素。如果浏览器确实支持<code>tab-size</code>，它将使用它。

Answer 1

tab-size 目前仅由 Firefox 和 Opera 使用您给定的供应商前缀。

对于 WebKit，有一个错误报告要求实现该属性。我相信这方面的工作已经开始，正如该报告的评论中所示。

对于 IE，我在 IE9 或 IE10 中找不到有关 -ms-tab-size 或 tab-size 实现的任何信息。我想 IE 团队对此一无所知。

Answer 2

似乎有一个关于这个主题的类似问题，但它并没有真正完全正确地回答这个问题。但确实如此，显然 CSS 中确实存在制表符，尽管我无法想象浏览器对它的支持有那么好。

在 google 上搜索几乎没有结果有关该主题的信息，进一步让我相信它没有得到很好的实现或使用。希望有帮助。

编辑

W3C 链接确实提到了制表位，但这只是一个工作草案 - 一个提案，并且没有实施。