html - 为什么在打印时部分出现在屏幕上的不可见元素？

问题描述

我生成附加赛分组...通常在每个巡回赛中都有 2^n 参与者：16、8、4、2。并且很容易在 flex 列中调整它们。但是有一个棘手的问题，在第一次巡回赛（回合）时，参与者人数在 16 到 8 之间。而且我需要隐形决斗，就像支架中的占位符一样，进行调整。
我试着做它们{visibility: hidden}，它们消失在屏幕上。但打印时意外部分出现。为什么会发生？

它在屏幕上的样子（很好，就像我计划的那样）：

以及打印时的外观（ctrl+P）：

并且有一个代码：

import React from 'react'
import { Checkbox, Box } from '@material-ui/core'
import { makeStyles } from '@material-ui/core/styles'
import { find } from 'lodash'
import { athletName, trainerName } from '../../config/functions'

function DuelSimple(props) {
  const {
    duelData,
    participants,
    onFighterChange,
    onWinnerChange,
    showScoreInput,
    showWinnerCheckbox
  } = props
  const { id, fighterRed, fighterBlue, winner, label /* scoreRed, scoreBlue  */ } = duelData

  const styles = {
    duelTable: props => ({
      /* width: '5cm', */
      border: '1px solid gray',
      borderRadius: 5,
      marginBottom: 5,
      borderSpacing: 0,
      tableLayout: 'fixed',
      visibility: props.duelData.status === 'fake' ? 'hidden' : 'visible'
    }),
    duelNumber: {
      width: 30,
      borderRight: '1px solid gray',
      textAlign: 'center',
      color: 'slategray'
    },
    duelLabel: {
      fontSize: 9
    },
    athletRed: { width: 140, height: 33, padding: '0 5px', borderBottom: '1px solid gray' },
    athletBlue: { width: 140, height: 33, padding: '0 5px' },
    athletInput: { width: '100%', border: 'none' },
    checkboxColumn: { width: 35, height: 33 },
    checkboxColumnRed: { borderBottom: '1px solid gray' },
    checkboxRed: { width: 7, height: 7, marginTop: 2, color: 'red' },
    checkboxBlue: { width: 7, height: 7, marginTop: 2, color: 'blue' },
    trainer: { color: 'gray', fontSize: 10 },
    athletColorColumn: { width: 5 },
    athletColorRed: { backgroundColor: 'rgba(255,0,0,0.5)', borderBottom: ' 1px solid gray' },
    athletColorBlue: { backgroundColor: 'rgba(0,0,255,0.5)' },
    scoreColumn: { width: 35, borderLeft: ' 1px solid gray' },
    scoreColumnRed: {
      '& input': { color: 'rgba(255,0,0,0.5)', fontWeight: 'bold' },
      borderBottom: ' 1px solid gray'
    },
    scoreColumnBlue: { '& input': { color: 'rgba(0,0,255,0.5)', fontWeight: 'bold' } },
    scoreInput: { border: 'none', width: 31, height: 25, textAlign: 'center' }
  }

  const useStyles = makeStyles(theme => styles)

  const classes = useStyles(props)

  let athletRedName, athletBlueName, trainerRedName, trainerBlueName

  //populate fighters data by id
  if (fighterRed) {
    const participantRedPopulated = find(participants, { athlet: { id: fighterRed } })
    athletRedName = athletName(participantRedPopulated.athlet)
    trainerRedName = trainerName(participantRedPopulated.trainer)
  } else {
    athletRedName = ''
  }
  if (fighterBlue) {
    const participantBluePopulated = find(participants, { athlet: { id: fighterBlue } })
    athletBlueName = athletName(participantBluePopulated.athlet)
    trainerBlueName = trainerName(participantBluePopulated.trainer)
  } else {
    athletBlueName = ''
  }

  return (
    <table className={classes.duelTable}>
      <tbody>
        <tr>
          <td className={classes.duelNumber} rowSpan='2'>
            {id}
            {label ? <div className={classes.duelLabel}>{label}</div> : ''}
          </td>
          <td className={classes.athletRed}>
            <input
              onChange={onFighterChange(id)}
              type='text'
              data-id={id}
              data-color='Red'
              className={classes.athletInput}
              value={athletRedName}
            />
            <div className={classes.trainer}>{trainerRedName}</div>
          </td>
          {showWinnerCheckbox && (
            <td className={`${classes.checkboxColumnRed} ${classes.checkboxColumn}`}>
              <Box displayPrint='none'>
                <Checkbox
                  inputProps={{ 'data-winner': fighterRed }}
                  onChange={onWinnerChange(id)}
                  className={classes.checkboxRed}
                  checked={winner === fighterRed && winner ? true : false}
                />
              </Box>
            </td>
          )}
          {showScoreInput && (
            <td className={`${classes.scoreColumn} ${classes.scoreColumnRed}`}>
              <input className={classes.scoreInput} />
            </td>
          )}
          <td className={`${classes.athletColorRed} ${classes.athletColorColumn}`}></td>
        </tr>
        <tr>
          <td className={classes.athletBlue}>
            <input
              onChange={onFighterChange(id)}
              type='text'
              data-id={id}
              data-color='Blue'
              className={classes.athletInput}
              value={athletBlueName}
            />
            <div className={classes.trainer}>{trainerBlueName}</div>
          </td>
          {showWinnerCheckbox && (
            <td className={`${classes.checkboxColumn}`}>
              <Box displayPrint='none'>
                <Checkbox
                  inputProps={{ 'data-winner': fighterBlue }}
                  onChange={onWinnerChange(id)}
                  className={classes.checkboxBlue}
                  checked={winner === fighterBlue && winner ? true : false}
                />
              </Box>
            </td>
          )}
          {showScoreInput && (
            <td className={`${classes.scoreColumn} ${classes.scoreColumnBlue}`}>
              <input className={classes.scoreInput} />
            </td>
          )}
          <td className={`${classes.athletColorBlue} ${classes.athletColorColumn}`}></td>
        </tr>
      </tbody>
    </table>
  )
}

export default DuelSimple

以及项目的依赖：

{
"@material-ui/core": "^4.5.2",
"@material-ui/icons": "^4.5.1",
"firebase": "^7.2.3",
"react": "^16.11.0",
"react-dom": "^16.11.0",
"react-redux": "^7.1.1",
"react-redux-firebase": "^3.0.4",
"react-router-dom": "^5.1.2",
"react-scripts": "2.1.5",
"redux": "^4.0.4",
"redux-firestore": "^0.9.0"
}

标签： htmlcssprintingmaterial-ui

html - 为什么在打印时部分出现在屏幕上的不可见元素？

问题描述

解决方案

推荐阅读