标签宽度 CSS 属性

Question

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

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

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

[更新：]

我创建了一个tab-size polyfill (Demo)：

<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>

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

Answer 1

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

对于 WebKit，there's a bug report 请求实现该属性。我相信这方面的工作已经开始，正如该报告中的 cmets 所示。

对于 IE，好吧，我找不到任何关于 IE9 或 IE10 中的 -ms-tab-size 或 tab-size 实现的信息。我想 IE 团队并没有那么聪明。

Answer 2

似乎有一个similar question on this subject，但它并没有完全正确地回答这个问题。它确实如此，但是提到显然是tab stops do exist in CSS，虽然我无法想象浏览器支持对它那么好。

Searching on google 因为它几乎没有提供有关该主题的信息，这进一步让我相信它没有很好地实现或使用。希望对您有所帮助。

编辑

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