css - Tab 宽度 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要求实现属性(property)。我相信这方面的工作已经开始，正如对该报告的评论中所看到的那样。

对于 IE，嗯，我在 IE9 或 IE10 中找不到任何关于 -ms-tab-size 或 tab-size 实现的信息。我想 IE 团队并不聪明。