Firefox 63 Webkit CSS проблема с использованием медиа-запроса устройства с соотношением пикселей - PullRequest
Новая
       37

Firefox 63 Webkit CSS проблема с использованием медиа-запроса устройства с соотношением пикселей

0 голосов
/ 28 октября 2018

Итак, я создавал веб-страницу, которая работала довольно хорошо.Но недавно Firefox выпустил версию 63, и у меня возникли проблемы со стилем моей страницы.Проблема заключается в медиа-запросе -webkit-min-device-pixel-ratio.

HTML 

<div class="navbar">
  <!-- Navbar for desktop -->
 <div class="nav-buttons">
  <button type="button" name="button" class="icon-logo"></button>
  <button type="button" name="button" class="page-link active">Product</button>
  <button type="button" name="button" class="page-link">User resources</button>
  <button type="button" name="button" class="page-link">Blog</button>
 </div>
 <div class="app-buttons">
    <button type="button" name="button" class="apple"></button>
    <button type="button" name="button" class="google"></button>
    <span>or</span>
    <button type="button" name="button" class="webapp">Sign up/log in</button>
  </div>
</div>

CSS 

.navbar {
  position: fixed;
  top: 0px;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  z-index: 999;
  border-bottom: 1px solid #92278f; }

Давая историю моей проблеме, я разрабатывал эту страницу наFirefox, поэтому мне не нужно было использовать этот медиа-запрос, но когда я проверял эту страницу на Chrome, моя исправленная навигационная панель вверху имела проблемы со стилем.Я проверил в интернете, могу ли я каким-то образом применить правила CSS только к Chrome.Я обнаружил, что условие -webkit-min-device-pixel-ratio: 0 позволило бы мне это сделать и по совпадению также работать над сафари, где я обнаружил, что та же самая проблема проявлялась.

Работает нормально (до версии 62 Firefox)

Should work like this

Оригинальная проблема с хромом (позиции ссылок)

enter image description here

Решено с помощью медиа-запроса Hack 

@media screen and (-webkit-min-device-pixel-ratio:0)  {
  .navbar .app-buttons button.apple, .navbar .app-buttons button.google {
    top: 4px;
  }
  .navbar .app-buttons button {
    top: -8px;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.3px;
  }
  .navbar .nav-buttons button.page-link {
    top: -7px;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.3px;
  }
}

Но теперь после обновленияFirefox до версии 63, я вижу, что это решение приносит больше проблем.Я прочитал по ссылке в Mozilla, что -webkit-min-device-pixel-ratio не является надежным медиа-запросом и не поддерживается каждый раз.Я хотел бы понять, что происходит, если есть решение, в котором мне не нужно использовать такие хаки, или есть хакерское решение, которое решит мою проблему на данный момент.

В последнее время возникает проблемас Firefox 63

enter image description here

Ответы [ 2 ]

0 голосов
/ 23 января 2019

Проблема заключалась в том, что я не использовал display: flex для классов app-buttons или nav-buttons, и из-за этого все дочерние кнопки отображались по-разному в разных браузерах.Я исправил эту проблему с помощью flex-стилей, и теперь я не использую какие-либо хакерские исправления для визуализации правильных стилей.

0 голосов
/ 29 октября 2018

попробуйте применить некоторые высоты: 

.navbar,
.navbar .app-buttons button,
.navbar .nav-buttons button.page-link
{
/* include this css for example */
   height: 1.5em;  
}

.navbar .app-buttons button,
.navbar .nav-buttons button.page-link
{
/* include this css for example */
   line-height: 1.5em;  
   align-self:center;
}

удалите свои хаки, посмотрите, как это происходит.

...