Question

因此，我有一个带有行的表，其中行高比需要的高得多。在Edge以外的所有浏览器中，我都可以使用display：contents解决问题，但是在Microsoft Edge（目前不支持此功能）中，我必须找到替代方法。有人可以指出正确的方向吗？

Answer 1

请尝试在使用display：contents;的[您的元素]之后将以下代码添加到CSS中。

`@supports not (display: contents) { /* workaround because Edge doesn't support display: contents; */
 a.remove {
    display: inline;
 }
}`

将a.remove替换为您的元素名称。

Answer 2

我尝试用Edge检查您的代码并检查结果。我在下面的行中进行了更改，并设置了“高度：30像素”，而不是300像素。

   export class DialogBox extends PureComponent {
  state = {
    textInput: null,
  }

  okButton = (
    <View style={styles.buttons}>
      <Button
        type="text"
        title={t('action')}
        onPress={() => {
          this.props.onOkPress(this.state.textInput)
          this.setState({ textInput: null })
        }}
      />
    </View>
  )

  cancelButton = (
    <Button
      type="text"
      title={t('cancel')}
      onPress={this.props.onCancelPress}
    />
  )

  confirmButtons = (
    <View style={styles.buttons}>
      {this.cancelButton}
      {this.okButton}
    </View>
  )

  inputButtons = (
    <Fragment>
      <TextInput
        noSpacing
        placeholder="input here..."
        name="input"
        onChangeText={(text) => this.setState({ textInput: text })}
      />
      {this.confirmButtons}
    </Fragment>
  )

  renderButtons (type) {
    switch (type) {
      case 'confirm':
        return this.confirmButtons
      case 'alert':
        return this.okButton
      case 'input':
        return this.inputButtons
      default:
        return this.okButton
    }
  }

  render () {
    const {
      title,
      message,
      isVisible,
      type,
      onRequestClose,
    } = this.props

    return (
      <Modal
        transparent
        animationType="fade"
        visible={isVisible}
        onRequestClose={onRequestClose}
      >
        <View style={styles.container}>
          <View style={styles.alertContainer}>
            <View stlye={styles.textContainer}>
              <H3 style={styles.title}>{title}</H3>
              <Text>{message}</Text>
            </View>
            {this.renderButtons(type)}
          </View>
        </View>
      </Modal>
    )
  }
}

现在，它可以在包括Edge在内的所有主要浏览器中正确显示行。

以下是Edge的测试结果。

Click here to see the image

我认为这是在Edge中正确显示输出的最简单的选择。

致谢

Deepak

Answer 3

边缘浏览器和IE尚未实现此功能。基本上有两种方法可以打破弹性行

1）分页符（仅在Mozilla中有效）

2）显示：内容；（仅在Mozilla，Chrome中有效）。

因此，如果知道行数并且有重复的实例要中断，则可以使用display：block和inline获得所需的结果。但是在动态重复行和可用瓦片的数量时，不可能破坏弹性盒。请报告Edge浏览器以实现显示内容。 https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/10938981-implement-the-box-generation-keywords-from-css-dis 这是非常重要的功能，但错过了。

如何替换显示：浏览器Edge中的内容

3 个答案: