Процент от одного пикселя в Webkit - PullRequest
Новая
       3

Процент от одного пикселя в Webkit

2 голосов
/ 20 марта 2012

У меня есть два div -элемента, верхний имеет высоту 40% , а другой 60% . В моем примере я поместил первый на top: 0;, а второй на bottom: 0;. Моя проблема в том, что я иногда получаю расстояние 1px между ними в Webkit!

Я создал jsFiddle, который воссоздает проблему в Webkit (Safari и Chrome, но отлично работает в Firefox.)

http://jsfiddle.net/bVxDA/ (измените размер окна, чтобы увидеть ошибку в действии)

Это код, который я использую.

HTML 

<div id="cover-top"></div>
<div id="cover-bottom"></div>​

CSS 

html, body {
    background: red;
    height: 100%;
}

#cover-top,
#cover-bottom {
    background: #000;
    position: absolute;
    width: 100%;
}

#cover-top {
    height: 40%;
    top: 0;
}

#cover-bottom {
    height: 60%;
    bottom: 0;
}

Мне было бы хорошо с решением, которое использует JavaScript или jQuery.

Ответы [ 3 ]

2 голосов
/ 20 марта 2012

Если высота html, body высота - нечетное число, то в строке 1 остаток «остаток».

Webkit не может делить 1px и не пытается.

См .: http://jsfiddle.net/iambriansreed/gPu3Y/

Вы можете заставить линию 1px исчезнуть, если установить следующее: 

#cover-bottom {
    height: auto;
    top: 40%;
    bottom: 0;
}
0 голосов
/ 20 марта 2012

просто измените последнее правило в 

#cover-bottom {
    top: 40%;
    bottom: 0;
}

поэтому не имеет значения, является ли высота элемента <html> нечетной

http://jsfiddle.net/bVxDA/4/ (я изменил цвет фона только для проверки поведения заливки)

0 голосов
/ 20 марта 2012

это происходит каждый раз, когда 40% не является целым числом. давайте предположим, что ваша страница имеет высоту 98px, поэтому мы получаем:

  • 40% = 39,2 пикс.
  • 60% = 58,8px

, поскольку мы не можем нарисовать «половину» пикселей, первый div получает высоту 39px, а второй - 58px. также, второй рисуется на 40px сверху, потому что оба div не могут «перекрываться» (помните: первый имеет высоту 39,2px, поэтому мы не можем начать рисовать с 39px - будет перекрытие по 0.2px) - и таким образом, мы получаем очень странный «разрыв» между ними.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...