Question

我在firefox中的投资组合网站上有一些不寻常的行为。我正在使用twitter bootstrap。按钮上的文字超出按钮宽度，单击按钮也没有任何反应。它适用于铬和野生动物园。

链接：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

不要在按钮标签内放置锚标签。

将其设为实际按钮，并在用户点击它时将用户重定向到您的联系我页面，或使用Bootstrap的按钮类设置按钮样式。

BOOTPLY

<强> HTML ：

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

Answer 2

您无法将<a>放入<button>内。他们不能正常工作，而且很难确定这种组合的适当行为是什么。

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

2 个答案: