2014-09-20 6 views
1

Страница без DirectWrite: http://i.imgur.com/2lsFuIn.pngОбнаруживать хромированный хром?

Страница с DirectWrite: http://i.imgur.com/By7g9qd.png

Моя система меню настройки таким образом, она должна точно пиксел, поэтому DirectWrite путает расположение. Разумеется, лучшим решением может быть исправление системы меню, не полагающейся на точный пиксель, и это тоже прием, но я в основном ищу способ обнаружения directwrite в качестве быстрого и легкого взлома.

сайта в вопрос: http://www.meyersboat.com/meyers/photos/

+0

Не можете вы просто даете детали меньше отступы как быстро исправить? – PeeHaa

+0

Последний элемент не будет выстраиваться в линию с правой стороны, а затем – ParoX

+0

, пожалуйста, вставьте соответствующий код в вопрос (подробнее здесь: http://stackoverflow.com/help/mcve), ссылаясь на ваш сайт без включения соответствующего кода isn Я считал хорошую практику на SO. –

ответ

1

Ее все вызванные 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; 
} 

На странице:

Google Chrome (включен DirectWrite) -> 317 ПВ

Google Chrome (отключено DirectWrite) -> 312 точек

Firefox -> 310 точек

IExplorer -> 310 точек

1

Один быстрый способ, которым я получил его на работу, чтобы добавить:

#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 без упаковки. Я не тестировал разные браузеры. Надеюсь, это поможет.

+0

Это привело к началу того, что в конечном итоге станет лучшим решением, но Thanasis ответил на мой вопрос напрямую, но ваше решение было более полезным для меня. – ParoX

+0

Рад помочь – crazymatt

Смежные вопросы