Javascript 检测directwrite chrome？

没有Directwrite的页面：

使用Directwrite的页面：

我的菜单系统设置得非常精确，所以Directwrite会弄乱布局。诚然，一个更好的解决方案可能是修复菜单系统，而不是依赖于精确的像素，这也是可以接受的，但我主要是寻找一种方法来检测directwrite作为一种快速简单的黑客

---

有问题的站点：

我让它工作的一个快速方法是添加：

#sub-navigation {
    display: table;
    width: 100%;
}

#sub-navigation li {
    list-style: none;
    /* float: left; */
    margin-top: 10px;
    padding-bottom: 7px;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 14px;
    font-weight: bold;
    padding-left: 2px;
    border-bottom: 1px solid white;
    display: table-cell;
}

---

我确实减小了文本大小，以适应这种情况，但通过这种方式，您可以添加/删除左侧的

填充

，而无需对其进行包装。我没有在不同的浏览器上测试。希望有帮助。

这都是由directwrite、字体系列和字体大小引起的，这是一个简单的测试：

function checkForDirectwrite(){
    var test = document.createElement('div');
    test.innerHTML = 'abcdefghijklmopqrstuvwxyzABCDEFGHIJKLMOPQRSTUVWXYZ';
    test.setAttribute('style','font-size:11px;visibility:hidden;position:absolute;height:auto;width:auto;white-space:nowrap;top:0px;left:-10000px;z-index:-10');
    document.body.appendChild(test);
    var width = test.clientWidth+1;
    document.body.removeChild(test);
    return width;
}

在您的页面中：

谷歌浏览器（启用Directwrite）-->317像素

谷歌浏览器（禁用Directwrite）-->312像素

Firefox-->310 px

---

IExplorer-->310 px

能否简单地减少项目的填充作为快速修复？最后一个元素不会与右侧对齐，请在问题本身中插入相关代码（更多信息如下：）不包含相关代码链接到您的网站被认为是不好的做法。这导致了一个更好的解决方案的开始，但Thanasis直接回答了我的问题，但您的解决方案对我更有帮助