仅在 Firefox 和 IE 中的按钮中的 Twitter Bootstrap 错误？

Question

我在 firefox 中的投资组合网站上有一些异常行为。我正在使用 twitter bootstrap.The 按钮上的文本超出了按钮宽度，单击按钮时也没有任何反应。它在 chrome 和 safari 上运行良好。

Link: www.nakibmomin.com

html

 <div class="parallax-overlay"></div>
    <div class="jumbotron" id="home">
      <div class="container">
        <img class="img-circle" src="img/profile.jpg" style="width: 100px;height:100px;">
        <h1>Nakib Momin</h1>
        <p>Student Blogger And Software Developer</p>
        <button type="button" class="btn btn-primary"><a href="#contact">Contact Me</a></button>
      </div>
    </div>

css

.parallax-overlay {
position: absolute;
left: 0;
top: 120;
width: 100%;
height: 100%;
background-image: url(../img/pattern.png);
background-repeat: repeat;
background-color: rgba(44,62,80,0.4);
z-index: 2;
min-height: 460px;
}

.jumbotron {

  background-image:url('../img/main.jpg');
  height: 100%;
  font-family: 'Hammersmith One', sans-serif;
  text-transform: uppercase;
  letter-spacing: 6px;
  text-align: center;
  min-height: 460px;
}

.jumbotron .container {
  position: relative;
  top:120px;
}

.jumbotron h1, .jumbotron p, .jumbotron a, .jumbotron button, .jumbotron img
{
  position: relative;
  z-index: 3;
}

.jumbotron img
{
  margin-bottom: 5px;
  padding: 2px;
}

.jumbotron button
{
  margin-top: 18px; 
  width: 130px;
}

.jumbotron h1 {
  color: #fff;
  font-size: 48px;  
  padding: 10px;
  font-weight: bold;

}

.jumbotron p {
  font-size: 12px;
  color: #e3e3e3;

}

.jumbotron a {
  font-size: 15px;
  color:#fff;
  text-decoration: none;
}

Answer 1

你不能把 <a> 放在 <button> 里面。它们不能正常工作，而且非常不清楚这种组合的正确行为是什么。

Answer 2

不要将锚标记放在按钮标记内。

要么将其设为实际按钮并在用户单击它时将其重定向到您的“与我联系”页面，要么使用 Bootstrap 的按钮类.

设计按钮样式

BOOTPLY

HTML:

<a href="#contact" class="btn btn-primary">Contact Me</a>

仅在 Firefox 和 IE 中的按钮中的 Twitter Bootstrap 错误？

Twitter Boostrap bugs in Buttons just in firefox and IE?

css

firefox

button

twitter-bootstrap