选项卡宽度 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 模拟器（演示）：

<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>，只能用于可以包含其他元素的元素。如果浏览器支持tab-size属性，则会使用该属性。

- Web_Designer

---

tab-size 属性相关规范：http://www.w3.org/TR/css3-text/#tab-size - BoltClock

谢谢@BoltClock！这个属性在Chrome、Safari和IE中有什么支持？ - Web_Designer

目前没有。我已经发布了一个答案。 - BoltClock

看起来这个问题现在在 WebKit 中已经被修复。 - mawtex

我最近在我的一个网站上创建了这个jQuery插件来解决这个问题。https://github.com/davestewart/jquery-plugins/tree/master/tabSize 如果可用，它使用CSS3属性tab-size，但如果不可用，则正确地将制表符转换为空格，包括那些不占用整个制表符宽度的制表符，也就是列。 - Dave Stewart

Answer 1

tab-size 目前只有 Firefox 和 Opera 支持，需要在其属性前添加特定的厂商前缀。

对于 WebKit，有一个 bug 报告 请求实现该属性。我相信工作已经开始了，因为可以在报告的评论中看到相关信息。

至于 IE，我找不到任何有关 IE9 或 IE10 实现 -ms-tab-size 或 tab-size 的信息。我想 IE 团队可能还没有意识到这一点。

- BoltClock

---

tab-size属性似乎现在被Chrome支持了。 - Andy Fleming

@BoltClock，那Twitter Bootstrap在他们的代码示例中是如何做到的呢？他们没有使用我见过的任何东西，他们没有使用tab-size CSS属性，也没有用空格替换它，或者使用任何正确宽度的span。 - Rantiev

Answer 2

看起来关于这个问题有一个类似的问题, 但它并没有完全回答那个问题。然而，它确实提到了显然CSS中存在制表位，尽管我无法想象浏览器对此的支持有多好。

在谷歌上搜索它几乎没有关于这个主题的信息，进一步让我相信它没有被很好地实现或使用。希望这可以帮助你。

编辑

W3C链接确实提到了制表位，但它只是一个工作草案-一个提议，并没有被实现。

- Nightfirecat

---

CSS中不存在制表位。那只是14年前的工作草案。 - BoltClock

抱歉，我刚刚发现它们在CSS3工作草案中重新出现为tab-size（正如OP所示，Firefox和Opera有自己的实现）。它们没有出现在CSS1或CSS2中，但它们可能在CSS3中有机会。 - BoltClock

被找到，然后被遗忘...叹气。总有一天我们会有选项卡！ - jimmetry