首页 \ 问答 \ Google Chrome，Flash和z-index错误行为(Google Chrome, Flash and z-index wrong behaviour)

Google Chrome，Flash和z-index错误行为(Google Chrome, Flash and z-index wrong behaviour)

 Google Chrome浏览器错误地显示Flash视频的z-index。 
 

 在Firefox或Internet Explorer中查看http://maxusglobal.com/ 。 
 

 现在在Chrome浏览器中查看它。 
 

 页面顶部的大视频应该在其顶部有一个“预览”图像z-indexed。 它在Firefox和Internet Explorer中执行，但不在Google Chrome中执行。 
 

 这似乎不是一个WebKit的事情，但特别是Chrome的错误。 
 

 我已经尝试了所有的模式，（不透明，窗口和透明），但是这不能解决它。 我还更改了Flash盒的z-index，但它仍然无法正常工作。 

Google Chrome is displaying the z-index of a Flash video incorrectly.
 

Take a look at http://maxusglobal.com/ in Firefox or Internet Explorer.
 

Now take a look at it in Chrome.
 

The big video at the top of the page should have a "preview" image z-indexed over the top of it. It does in Firefox and Internet Explorer, but not Google Chrome.
 

This doesn't seem to be a WebKit thing, but specifically a Chrome bug.
 

I have tried all the wmodes, (opaque, window and transparent), but this doesn't fix it. I also changed the z-index of the Flash box, but it is still not working.

原文：https://stackoverflow.com/questions/4313364
更新时间：2022-04-26 19:04

最满意答案

 正如@Alex McMillan提到的那样，使用状态来决定应该在dom中呈现的内容。 
 

 在下面的示例中，我有一个输入字段，我想在用户单击按钮时添加第二个字段，onClick事件处理函数调用handleAddSecondInput（），将inputLinkClicked更改为true。 我使用三元运算符来检查呈现第二个输入字段的真实状态 
 

class HealthConditions extends React.Component {
  constructor(props) {
    super(props);


    this.state = {
      inputLinkClicked: false
    }
  }

  handleAddSecondInput() {
    this.setState({
      inputLinkClicked: true
    })
  }


  render() {
    return(
      <main id="wrapper" className="" data-reset-cookie-tab>
        <div id="content" role="main">
          <div className="inner-block">

            <H1Heading title="Tell us about any disabilities, illnesses or ongoing conditions"/>

            <InputField label="Name of condition"
              InputType="text"
              InputId="id-condition"
              InputName="condition"
            />

            {
              this.state.inputLinkClicked?

              <InputField label=""
                InputType="text"
                InputId="id-condition2"
                InputName="condition2"
              />

              :

              <div></div>
            }

            <button
              type="button"
              className="make-button-link"
              data-add-button=""
              href="#"
              onClick={this.handleAddSecondInput}
            >
              Add a condition
            </button>

            <FormButton buttonLabel="Next"
              handleSubmit={this.handleSubmit}
              linkto={
                this.state.illnessOrDisability === 'true' ?
                "/404"
                :
                "/add-your-details"
              }
            />

            <BackLink backLink="/add-your-details" />

          </div>
         </div>
      </main>
    );
  }
}


As @Alex McMillan mentioned, use state to dictate what should be rendered in the dom.
 

In the example below I have an input field and I want to add a second one when the user clicks the button, the onClick event handler calls handleAddSecondInput( ) which changes inputLinkClicked to true. I am using a ternary operator to check for the truthy state, which renders the second input field
 

class HealthConditions extends React.Component {
  constructor(props) {
    super(props);


    this.state = {
      inputLinkClicked: false
    }
  }

  handleAddSecondInput() {
    this.setState({
      inputLinkClicked: true
    })
  }


  render() {
    return(
      <main id="wrapper" className="" data-reset-cookie-tab>
        <div id="content" role="main">
          <div className="inner-block">

            <H1Heading title="Tell us about any disabilities, illnesses or ongoing conditions"/>

            <InputField label="Name of condition"
              InputType="text"
              InputId="id-condition"
              InputName="condition"
            />

            {
              this.state.inputLinkClicked?

              <InputField label=""
                InputType="text"
                InputId="id-condition2"
                InputName="condition2"
              />

              :

              <div></div>
            }

            <button
              type="button"
              className="make-button-link"
              data-add-button=""
              href="#"
              onClick={this.handleAddSecondInput}
            >
              Add a condition
            </button>

            <FormButton buttonLabel="Next"
              handleSubmit={this.handleSubmit}
              linkto={
                this.state.illnessOrDisability === 'true' ?
                "/404"
                :
                "/add-your-details"
              }
            />

            <BackLink backLink="/add-your-details" />

          </div>
         </div>
      </main>
    );
  }
}

相关问答

更多