檢測directwrite chrome？

頁無DirectWrite的：http://i.imgur.com/2lsFuIn.png 檢測directwrite chrome？

頁用的DirectWrite：http://i.imgur.com/By7g9qd.png

我的菜單系統以這樣的方式是，以精確的像素設置，所以DirectWrite的食堂布局。誠然，更好的解決方案可能是修復菜單系統不依賴於確切的像素，這也是接受，但我主要是在尋找一種方法來檢測directwrite作爲一個快速和容易的黑客攻擊。

網站中的問題：http://www.meyersboat.com/meyers/photos/

來源

2014-09-20 ParoX

你就不能簡單地給項目少填充爲速戰速決？ – PeeHaa 2014-09-20 23:21:59

最後一個元素不會與右側排列 – ParoX 2014-09-20 23:25:52

請在問題本身插入相關代碼（更多信息在這裏：http://stackoverflow.com/help/mcve）鏈接到您的網站，而不包括相關代碼isn在SO上沒有考慮好的做法。 – 2014-10-10 17:43:09

其所有的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 PX

谷歌瀏覽器（禁用的DirectWrite） - > 312 PX

火狐 - > 310像素

IEXPLORER - > 310像素

來源

2014-10-10 18:29:43 GramThanos

一個快速的辦法，我就開始工作了補充：

#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; 
}

我確實減少了這種文字的大小，以適應，但這種方式，您可以添加/刪除padding-left沒有它包裝。我沒有在不同的瀏覽器上測試。希望有所幫助。

來源

2014-10-10 17:48:43 crazymatt

這導致了一個什麼最終會更好的解決辦法，但Thanasis直接回答了我的問題，但您的解決方案對我更有幫助 – ParoX 2014-10-10 20:57:17

很高興幫助 – crazymatt 2014-10-10 21:27:12

檢測directwrite chrome？

回答

相關問題