按钮功能打开在NewTab内部<figcaption>一次不起作用

Question

我有一个按钮，当单击它时，会打开一个新的选项卡，其中包含javascript中指定的URL。然而，一旦我把这个按钮放在figcaption中，它就可以点击，但javascript不起作用。这是代码：

<div class="container-top-pics">
      <div class="row-top-pics">
        <div class="column-left-pic">
          <div class="col-inner">
            <img src="Images/sf-downtown.jpg">
              <figcaption>
                WELCOME TO THE<br />
                  <h1>DEAL GUIDE</h1><br />
              </figcaption> 
          </div>
        </div> 
          <div class="column-right-pic">
            <div class="col-inner">
              <img src="Images/sf-ad.jpg">
              <figcaption>
                SPECIAL DEALS<br />
                <h1>GET THEM</h1>
                <h2>NOW</h2>
                <button type="button" id="button-ad" class="button-ad" onclick="OpenInNewTab()">RESERVE NOW</button>
                </figcaption>
            </div>
          </div>
        </div>
      </div>  

CSS：

.container-top-pics {
    width: 80%;
    margin: 0 auto;
    max-width:1140px;
}
img {
    max-width:100%;
}
.column-right-pic {
    float:left;
    width:29%;
    position: relative;
}
.column-right-pic figcaption {
    font-family: "Avenir";
    letter-spacing: 1px;
    color: #FFF;
    font-size: 1vw;
    font-weight: 100;
    text-align: center;
  position: absolute;
  z-index: 1000;
  height: 100%;
  width: 100%;
  top: 0;
  padding: 0 0 0 0;
  line-height: 5em;
}
.column-right-pic h1 {
    font-family: "Avenir";
    letter-spacing: 4px;
    color: #FFF;
    font-style: normal;
    font-weight: 100;
    text-align: center;
    font-size: 2vw;
    width: 100%;
    padding: 0% 0 0 0 ;
    line-height: 0;
}
.column-right-pic h2 {
    font-family: "Avenir";
    letter-spacing: 4px;
    color: #FFF;
    font-style: normal;
    font-weight: 100;
    text-align: center;
    font-size: 2vw;
    width: 100%;
    padding: 0% 0 0 0 ;
    line-height: 1.7em;
}
.column-right-pic .button-ad {
    font-family: "Helvetica Neue";
    letter-spacing: 1px;
    color: #FFF;
    font-style: normal;
    font-weight: 500;
    text-align: center;
    font-size: .8vw;
    width: 45%;
    height: 10%;
    padding: 0% 0 0 0 ;
    line-height: 1.7em;
    background-image: url(../Images/button-reserve.jpg);
    border:none;
}
.button-ad:hover {
    background-image: url(../Images/button-reserve-hover.jpg);
    cursor: pointer; cursor: hand;  
}
.button-ad:active {
    background-image: url(../Images/button-reserve-click.jpg)   
}

Javascript：

document.getElementById('button-ad').onclick = function OpenInNewTab(url) {
  var win = window.open('http://www.example.org');
  win.focus();
}

Answer 1

Mike，问题不在于按钮本身的位置，而在于你应用的样式，你实际上可以点击按钮，但你给了按钮10%的高度，所以你没有足够的面积点击它，试着删除高度属性，或者至少给它更大的点击面积，欢呼

顺便说一句，它在Chrome中运行良好，但由于Chrome将溢出的"文本"视为按钮的一部分，Firefox和其他浏览器可能不会

.column-right-pic .button-ad {
    font-family: "Helvetica Neue";
    letter-spacing: 1px;
    color: #FFF;
    font-style: normal;
    font-weight: 500;
    text-align: center;
    font-size: .8vw;
    width: 45%;
    border-style: none;
    border-top: 2px solid #ffffff;
    /*height: 10%;*/
    padding: 0% 0 0 0 ;
    line-height: 1.7em;
    background-image: url(../Images/button-reserve.jpg);
    /*background-color: #ff0000;*/
    background-color: transparent;
}