2015-02-11 9 views
1

Я решил половину проблемы, но не полностью понял проблему, которая меня беспокоит. Интересно, может ли кто-нибудь помочь мне понять, что играет?медиа-запрос max-width 767px - стили отображаются только с разрешением 766 пикселей или ниже (только с включенным firefox)

У меня есть iframe, установленный на 100% ширину через CSS. Контейнер div равен 767px. И поэтому так и есть iframe.

У меня есть следующий медиа-запрос в таблицу стилей в IFrame в:

@media (max-width: 767px) { 
 
    body { 
 
     background: red; 
 
    } 
 
}

Во всех популярных браузерах протестированы кроме Firefox, запрос СМИ вступает в силу и устанавливает фон тела на красный. В Firefox медиа-запрос вступает в силу только тогда, когда iframe установлен на 766px - на 1px меньше, хотя максимальная ширина должна быть «до и в том числе». Это похоже на ошибку. Моим обходным решением пока является установка ширины iframe до 766.7px (вычесть .3 пикселя). Кажется, это работает в Firefox (вычитание 0.2 не работает).

Мой вопрос - что здесь происходит? Может ли это быть ошибкой в ​​Firefox? Я знаю, что моя реализация iframe немного нерегулярна, но я думаю, что основная причина может быть связана с этим вопросом, который вдохновил мое решение: Media query lost in Firefox when window resized to max-width minus scrollbar width

+0

hmm интересно! вы пытались найти, если такая ошибка уже существует в bugzilla? –

+0

Я не знал о bugzilla, но я отправил отчет об ошибке. Я напишу здесь дополнительную информацию, которую я получу/узнаю. Большое спасибо за ответ! –

+0

Теперь для FF и Chrome есть такие же ошибки. Я исправил его на данный момент с помощью 'max-width: 767.8px', и стили для' 767px' применяются к этой ширине. – gdfgdfg

ответ

1

FWIW, идентичное поведение в Chrome было связано с ... настройкой масштабирования браузера вкладки до 125% вместо 100%

Я считаю, что это отбросило расчет моделирующего iframe телефона, внутри которого должно было быть под порогом 767px.

Я потратил час, чтобы разобраться во всех источниках против старого развертывания, прежде чем замечать> _>