React - белый экран, отображаемый сбоку с Inte rnet Explorer - PullRequest
Новая
       35

React - белый экран, отображаемый сбоку с Inte rnet Explorer

0 голосов
/ 25 января 2020

Приложение отлично работает во всех браузерах, кроме Inte rnet Explorer 11. IE Дисплей

Посмотрите, как на экране карты появляется белый экран и он перемещает кнопки в нижнем колонтитуле.

Вот как должно отображаться: Правый вывод Mozilla

Почему это происходит? Это происходит только в IE. Есть ли проблема с флексбоксами на IE?

Вот часть кода 

const NoAuthFooter = props => {
  const classes = useStyles();
  const { classes: propClasses = {} } = props;

  return (
    <Toolbar className={clsx(classes.footbar, propClasses.root)}>
      <div className={classes.company}>
        <Typography variant="h6">
          Hecho con <SvgHeartBlockyEmpty width="16" height="16" />
          &nbsp;por Innovación
        </Typography>
      </div>
      <div className={classes.actions}>
        <div className={clsx(classes.buttonContainer, classes.rowContainer)}>
          <LinkButton title="Más cerca de ti" to="/closer" />
        </div>
        <div className={classes.buttonContainer}>
          <LinkButton
            id="WebFooter_a_terms"
            title="Términos"
            to={{
              pathname: ROUTE_NAMES.information,
              aboutProps: {
                subject: MENU.terms
              }
            }}
          />
        </div>
        <div className={classes.buttonContainer}>
          <LinkButton
            id="WebFooter_a_help"
            title="Ayuda"
            to={{
              pathname: ROUTE_NAMES.information,
              aboutProps: {
                subject: MENU.help
              }
            }}
          />
        </div>
      </div>
    </Toolbar>
  );
};

const useStyles = makeStyles(theme => ({
  footbar: {
    position: 'relative',
    display: 'flex',
    width: '100%',
    bottom: 0,
    boxShadow: '0px 2px 10px -1px rgba(0,0,0,0.2)',
    backgroundColor: '#FFFFFF'
  },
  company: {
    flex: 1,
    color: theme.palette.color.default,
    '@media (max-width:600px)': {
      display: 'none'
    },
    [theme.breakpoints.up('lg')]: {
      flex: 2
    }
  },
  companyText: {
    display: 'inline',
    fontSize: 12
  },
  actions: {
    flex: 1,
    display: 'flex',
    justifyContent: 'flex-end',
    '@media (max-width:600px)': {
      flex: 1,
      justifyContent: 'space-around'
    }
  },
  buttonContainer: {
    flex: 1,
    justifyContent: 'center',
    // * Responsive
    [theme.breakpoints.up('sm')]: {
      maxWidth: 160
    }
  },
  rowContainer: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'flex-start',
    flex: 2
  },
  mobileHide: {
    display: 'none',
    [theme.breakpoints.up('md')]: {
      display: 'block'
    }
  }
}));

Спасибо за помощь.

1 Ответ

0 голосов
/ 27 января 2020
Браузер

IE имеет следующие проблемы совместимости с flexbox.

  1. IE 11 требует, чтобы единица была добавлена ​​к третьему аргументу, свойство flex-based см. Документация MSFT

  2. В IE10 и IE11 контейнеры с display: flex и flex-direction: column не будут правильно рассчитывать размеры своих согнутых дочерних элементов, если контейнер имеет минимальную высоту, но не имеет явного свойства высоты.

  3. IE 11 неправильно выравнивает элементы по вертикали при использовании минимальной высоты

  4. В IE10 значение по умолчанию для flex составляет 0 0 auto вместо 0 1 auto, как определено в последней спецификации c.

Ссылка:

CSS Flexbox

Я предлагаю вам обратиться по ссылке ниже, которая может помочь решить проблему.

Исправление позиционирования Flexbox для IE10 и IE11

Если проблема не устраняется, тогда я предлагаю Вы публикуете образец кода, используя только HTML и CSS. Мы постараемся проверить и протестировать его, а также предоставить предложения по нему.

...