Question

我的React应用遇到麻烦。如果我将孩子的位置设置为绝对位置，并且将其位置设置为相对位置，则为父级。（使用内联样式或https://material-ui.com/customization/css-in-js/都没关系然后，在Firefox中，它将按照css标准进行显示-相对于其直接父对象位于左等位置的子对象，但在chrome（版本70.0.3538.77）中，它将相对于文档主体放置子对象。

const DataTableFooter = ({totalCount, page, size, onChangePage, onChangeRowsPerPage}) => {
      return (
        <TableFooter>
          <TableRow
            style={{
              position: 'relative',
            }}>
            <TablePagination
              style={{
                position: 'absolute',
                bottom: 0,
                right: 0,
              }}
            />
          </TableRow>
        </TableFooter>
      );
    };

    export default DataTableFooter;

具有讽刺意味的是，很多google搜索有关css绝对定位错误的信息，我确实想出了有关Firefox如何在这种情况下将孩子相对于其父级定位而不是chrome定位的故事，（我是否有一天或之后的机会？）但没什么用。

Answer 1

似乎您正在尝试设置组件元素的样式，而不是组件正在渲染的元素的样式。

Answer 2

我似乎已经确定了问题。从我的问题的示例代码中可以看出，我正在处理表，那里显示的react元素将生成适当的HTML TABLE 元素。（不是将div样式设置为表格等，而是实际的td tr等。）表格元素将不响应position：相对于chrome，因为在标准中未定义 https://www.w3.org/TR/CSS21/visuren.html#choose-position

''position：relative'对table-row-group的影响， table-header-group，table-footer-group，table-row，table-column-group， table-column，table-cell和table-caption元素未定义。 '

React应用，绝对定位的子对象未相对于其相对定位的父对象定位（在Chrome中）

2 个答案: