React - 白色屏幕显示在 Internet Explorer 的旁边

Question

该应用程序在除 Internet Explorer 11 之外的所有浏览器上都能完美运行。 IE Display

看看地图的一侧出现了一个白色屏幕，它移动了页脚上的按钮。

它应该是这样显示的： Mozilla Right Displaying

为什么会这样？这只发生在 IE 中。 IE 上的 flexbox 有问题吗？

这是部分代码

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'
    }
  }
}));

感谢您的帮助。

Answer 1

IE 浏览器与 flexbox 存在以下兼容性问题。

IE 11 要求在第三个参数中添加一个单位，flex-basis 属性见 MSFT documentation
在 IE10 和 IE11 中，带有 display: flex 和 flex-direction: column 的容器如果有 min-height 但没有明确的高度，将无法正确计算其 flexed children 的尺寸属性.
当使用最小高度时，IE 11 无法正确垂直对齐项目
在 IE10 中，flex 的默认值是 0 0 auto，而不是最新规范中定义的 0 1 auto。

参考：

CSS Flexbox

我建议您参考下面的 link，这可能有助于解决问题。

Fixing Flexbox positioning for IE10 & IE11

如果问题仍然存在，那么我建议您 post 仅使用 HTML 和 CSS 的示例代码。我们会尝试检查和测试它并尝试为它提供建议。

React - 白色屏幕显示在 Internet Explorer 的旁边

React - White screen displaying on the side with Internet Explorer

javascript

reactjs

internet-explorer

flexbox

footer