Отображение компонентов веб-набора на Mozilla Firefox

Я пытаюсь разработать сайт с использованием функций webkit в моем CSS. Приведенный ниже код отлично работает в Google Chrome, Opera и Safari, но не в Firefox. Я теряю красный фон и положение вкладок в Firefox.

Это мой фрагмент кода:

window.onscroll = fadeNav;

function fadeNav() {
  var offset = getScrollXY();
  //if y offset is greater than 0, set opacity to desired value, otherwise set to 1
  offset[1] > 0 ? setNavOpacity(0.4) : setNavOpacity(1.0);
}

function setNavOpacity(newOpacity) {
  var navBar = document.getElementById("header_bar");
  navBar.style.opacity = newOpacity;
}

function getScrollXY() {
  var scrOfX = 0,
    scrOfY = 0;

  if (typeof(window.pageYOffset) == 'number') {
    //Netscape compliant
    scrOfY = window.pageYOffset;
    scrOfX = window.pageXOffset;
  } else if (document.body && (document.body.scrollLeft || document.body.scrollTop)) {
    //DOM compliant
    scrOfY = document.body.scrollTop;
    scrOfX = document.body.scrollLeft;
  } else if (document.documentElement && (document.documentElement.scrollLeft || document.documentElement.scrollTop)) {
    //IE6 standards compliant mode
    scrOfY = document.documentElement.scrollTop;
    scrOfX = document.documentElement.scrollLeft;
  }

  return [scrOfX, scrOfY];
}
* {
  margin: 0px;
  padding: 0px;
}
#header_bar {
  height: 40px;
  position: fixed;
  top: 0px;
  z-index: 10020;
  width: 100%;
  background: -webkit-linear-gradient(270deg, #b20000, #7f0000);
  -webkit-border-radius: 2px;
  /*making rounded corners*/
  -webkit-box-shadow: rgba(110, 110, 110, 0.6) 0px 4px 4px;
  /*color, left, down, blur, transparency : include inset if you want it to be an internal shadow*/
  display: -webkit-box;
  -webkit-box-orient: horizontal;
}
#title {
  font: bold 20px Tahoma;
  color: white;
  margin: 10px;
  text-align: left;
  width: 80%;
}
#uname {
  font: 12px Tahoma;
  color: white;
  margin: 10px;
  text-align: right;
}
#accnt {
  font: 12px Tahoma;
  color: white;
  margin: 10px;
  text-align: right;
}
#help {
  font: 12px Tahoma;
  color: white;
  margin: 10px;
  text-align: right;
}
#storg {
  font: 12px Tahoma;
  color: white;
  margin: 10px;
  text-align: right;
}
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>..:CodeByMi Home:..</title>
  <link rel="stylesheet" href="navbar-fader.css">
  <script src="navbar-fader.js"></script>
</head>

<body>
  <div id="header_bar">
    <div id="title">codedByMi</div>
    <div id="uname">username</div>
    <div id="accnt">account</div>
    <div id="help">help</div>
    <div id="storg">storage</div>
  </div>
</body>

</html>

Кто-нибудь может мне помочь?

Источник

1 ответ

Решение

По большей части вам больше не нужно добавлять префиксы, такие как градиенты, границы и радиус рамки. Флексбокс немного сложнее, но об этом я расскажу ниже.

Нефиксированная версия box-shadow сегодня работает везде, где она поддерживается (например, не IE8 или Opera-Mini), кроме устройств Android 2.3. Чтобы покрыть эти устройства вы можете использовать -webkit-box-shadow.

Нефиксированная версия border-radius работает везде, где поддерживается полная остановка (опять же, нет IE8 или Opera-Mini), поэтому не используйте префикс.

Нефиксированная версия линейного градиента имеет хорошее покрытие в современных браузерах, но старые версии Safari и Android до 4.4 будут иметь преимущество от префикса -webkit-.

Flexbox немного сложнее. За последние несколько лет его поддержка менялась несколько раз. Подробнее об этом смотрите в этой статье: "Старый" Flexbox и "Новый" Flexbox. Это самый полный обзор, документирующий изменения за последние годы, которые я смог найти. CanIUse.com предоставляет хорошее представление о том, какие синтаксисы поддерживаются в каких браузерах. Вы можете найти обзор flexbox здесь.

CSS:

#header_bar {
  height: 40px;
  position: fixed;
  top: 0px;
  z-index: 10020;
  width: 100%;
  background: -webkit-linear-gradient(270deg, #b20000, #7f0000);
  background: linear-gradient(270deg, #b20000, #7f0000); /*Always put the unprefixed version last*/
  border-radius: 2px; /*No prefix required here*/
  -webkit-box-shadow: rgba(110, 110, 110, 0.6) 0px 4px 4px; 
  box-shadow: rgba(110, 110, 110, 0.6) 0px 4px 4px; /*Always put the unprefixed version last*/
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap; /*Accepts wrap | nowrap | wrap-reverse */
  -webkit-flex-direction: row;
  flex-direction: row; /*row is used instead box-orient that was only supported in FireFox*/
}

Еще одно хорошее резюме старого и нового синтаксиса flexbox можно найти в журнале Smashing Magazine. Просто помните, что IE8 и IE9 вообще не будут поддерживать модель гибкой коробки. Поэтому, если вам необходимо поддерживать эти браузеры, вам следует рассмотреть альтернативный подход, например, использовать условный оператор для загрузки отдельного файла CSS для этих браузеров. Например:

<!--[if lte IE 9]>
    <link rel="stylesheet" type="text/css" href="ie8-and-ie9.css" />
<![endif]-->
Источник
Другие вопросы по тегам