Поведение интервалов между Webkit - исправлено Web Inspector - PullRequest
Новая
       24

Поведение интервалов между Webkit - исправлено Web Inspector

2 голосов
/ 04 января 2011

Я столкнулся со случайной проблемой в браузерах на основе Webkit (протестировано в Chrome и Safari).На веб-сайте, который я поддерживаю, я обновлял обложки, которые мы используем для наших сообщений об ошибках, и он отлично смотрится во всех браузерах, кроме браузеров на основе Webkit.Кажется, проблема, с которой я сталкиваюсь, исчезает, когда я включаю или выключаю любое правило CSS через Web Inspector.

Проблема:

Webkit CSS Bug?

Интервал над элементами управления размером текста не должен быть, он должен выглядеть следующим образом:

Corrected

Раздражает то, что интервал исчезает, когда я переключаю любое css свойство в Web Inspector.

HTML-код для всплывающего окна: 

<div class="popup">
  <div class="header">
    <div class="block"></div>
    <a class="normalFont" href="javascript:void(0);" title="Normal Font"><span>Normal Font</span></a>
    <a class="largerFont" href="javascript:void(0);" title="Larger Font"><span>Larger Font</span></a>
    <a class="largestFont" href="javascript:void(0);" title="Largest Font"><span>Largest Font</span></a>
    <a class="close" href="javascript:void(0);" title="Close"><span>Close</span></a>
  </div>
  <div class="message">...</div>
  <div class="footer"></div>
</div>

А ключевая часть CSS: 

.popup
{
  width: 310px;
}

.popup .header
{
  height: 40px;
  margin: 0;
  padding: 0;
  background: url(...);
}

.popup .header .block
{
  float: left;
  height: 19px;
  width: 210px;
}

Где .block применяется к:

CSS Block

Кто-нибудь знает, почему это происходит и есть ли обходной путь?

Обновление : живой пример (хотя и с использованием устаревшей графики)доступно здесь .Если щелкнуть элемент, например «Медицинские расходы» в браузере Webkit, всплывающее окно с ошибкой пробела.

Ответы [ 2 ]

1 голос
/ 12 января 2011

Это не полный ответ, но, надеюсь, этого достаточно, чтобы указать вам правильное направление.

В Client.Popups.js, внутри функции CreateOverlay, если я закомментирую эту строку: 

ResizeOverlay(offset.top, offset.left, width, height, target == null ? null : target);

и замените его каким-нибудь быстрым хакерским кодом для наложения: 

$("body").append('<div style="position:absolute;top:0;width:' + $(document).width() + 'px;height:' + $(document).height() + 'px;background:red;opacity:0.5"></div>');

Странный разрыв пропал.

Поэтому я предлагаю внимательно изучить / переписать код наложения.

0 голосов
/ 30 июня 2011

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

...