Чем обусловлена ​​эта разница в рендеринге между Webkit и Gecko + Trident? - PullRequest
Новая
       11

Чем обусловлена ​​эта разница в рендеринге между Webkit и Gecko + Trident?

0 голосов
/ 09 апреля 2011

Я отправил это в Webkit bugzilla (включая полный CSS и HTML) неделю назад, но пока не получил ответа.В то же время я хотел бы знать, что я или Webkit делают что-то странное. Я уже нашел обходной путь , просто ищу ответы о том, что именно точно вызывает эту разницу.

Вот что я испытываю: http://woei.mindcontrolled.nl/got/renderverschil-webkit-gecko-trident/chromesafari-vs-firefoxie.jpg

Протестировано в Chrome 10.0.648.204, Safari 5.0.3 (7533.19.4), Firefox 4.0 и версии IE 8.

Это связанный код.Я уже выделил этот код в HTML-коде, чтобы выяснить, вызывали ли проблемы окружающие объекты, но проблема остается. 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

[...]

<div id="top">
    <div id="logo">
        <a href=""><strong><span style="color: #005288;">pre</span><span style="color: #00aeef;">view</span></strong> <span style="color: #fcaf17;">website</span></a>
    </div>

    <div id="topmenu">
        <ul>
            <li><a href=""><span>over</span> ons</a></li>
            <li><a href=""><span>onze</span> partners</a></li>
            <li><a href="">contact</a></li>
            <li><a href="">helpdesk</a></li>
        </ul>
    </div>

    <div style="clear: both;"></div>
</div>

И CSS: 

#container, #top, #contentcontainer {
    padding: 12px;
}

#logo {
    float: left;

    margin: 0;

    font-size: 2em;
    letter-spacing: -2px;
}

#topmenu ul, #mainsubmenu ul {
    margin: 0;
    padding: 0;

    list-style-type: none;
}

#topmenu li, #mainsubmenu li {
    display: inline;
}

#topmenu li {
    margin-left: 20px;
}

#topmenu li:first-child {
    margin-left: 0;
}

#topmenu a {
    color: #005288;
}

#topmenu a:hover {
    color: #00aeef;
}

#topmenu a span {
    color: #005288;
}

Я начал с измерения всех элементов div.чтобы увидеть, имели ли они одинаковые, автоматически рассчитанные размеры как в Gecko, так и в Webkit, и все ли они имеют одинаковые измерения ширины (но, конечно, высота отличается в Webkit).Это 390 пикселей в Chrome Firebug lite, а также в Firefox (4) DOM-инспекторе.

Даже если этих 390 пикселей не хватило бы для полного списка, div мог бы просто расшириться дооставил.Возможно, это может быть в том случае, если шрифты отображаются немного по-другому или

Что еще странно, если я удаляю 

#topmenu li:first-child {
    margin-left: 0;
}

из CSS, это ничего не делает для позициипервый элемент в списке.Вместо этого он изменяет положение LI на линии second !«Helpdesk» будет затем выровняться с «Over ons», как ни странно.

Мой обходной путь: Если я определю фиксированную ширину для DIV верхнего меню, по крайней мере, 390 (текущая ширина) плюс 20 пикселей (поле, которое я удаляю, используяfirst-child) при минимальной общей фиксированной ширине 410 пикселей все элементы остаются на одной линии.

Очень приятно слышать, что все говорят по этому поводу.

Ответы [ 2 ]

0 голосов
/ 27 июля 2012

Я понял, что не так: вы используете явную ширину веб-страницы.Из-за этого последний элемент не помещается, даже если окно браузера достаточно широкое, потому что вы не оставляете ему достаточно места.Чтобы это исправить, не указывайте ширину для своей веб-страницы и переделайте свой CSS, чтобы приспособиться к ширине окна браузера.

0 голосов
/ 09 апреля 2011

Я создал jsfidle и протестировал его в Chrome и Firefox, но я не могу воспроизвести ваши выводы.Возможно, вы получили больше / другие html / css, чем фрагменты, которые вы опубликовали?Я получаю в основном одно и то же в обоих браузерах, и поле #topmenu li:first-child выполняет то же, что и в обоих браузерах.

У меня Chrome 10 и Firefox 3.6.16 на Mac с Snow Leopard.

Это Chrome:

enter image description here

И Firefox:

enter image description here

...