Question

我对bootstrap网站有这个奇怪的问题。我有一个包含一些产品的块，我用锚标签包装了它的内容。令我惊讶的是，我没有添加一些锚标签。我知道浏览器试图通过添加元素来关闭标签，但我找不到任何HTML问题。我正在使用bootstrap版本3。

＆＃13;

.home-page-product-box {
  text-align: center;
  padding: 0 15px;
}
.home-page-product-box > a {
  /*display: block;*/
}
.home-page-product-box > a > img {
  width: 100%;
}
.home-page-product-box > a > div:nth-child(2) {
  background: #03b6f0;
  color: #ffffff;
  font-family: Lato-Medium;
  border-radius: 6px;
  text-align: left;
  font-weight: 900;
  text-transform: uppercase;
  font-size: 14px;
  padding: 6px 14px;
}
.home-page-product-box > a > div:last-child {
  text-align: left;
  font-size: 12px;
  color: #959595;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <div class="col-xs-6 col-sm-3 home-page-product-box">
        <a href="#">
          <img src="https://s-media-cache-ak0.pinimg.com/236x/a3/e1/04/a3e1048687b88956cd4edbc4b38a98b2.jpg" alt="">

          <div class="col-xs-12">
            Power Supplies
          </div>

          <div class="col-xs-12">
            Lorem ipsum dolor sit amet, consectetuer et adipiscing elit. Aenean commodo ligula eget dolor.
            <a href="#">View range</a>
          </div>
        </a>
      </div>
    </div>
  </div>
</div>

＆＃13;

但我得到的是：

＆＃13;

<div class="col-xs-6 col-sm-3 home-page-product-box">
  <a href="#">
    <img src="img/home-product-image1.jpg" alt="">

    <div class="col-xs-12">
      Power Supplies
    </div>
  </a>
  <div class="col-xs-12">
    <a href="#">
                                Lorem ipsum dolor sit amet, consectetuer et adipiscing elit. Aenean commodo ligula eget dolor.
                                
    </a>
    <a href="#">View range</a>
  </div>

</div>

＆＃13;

Answer 1

问题似乎就在这里。

＆＃13;

<a href="#">
  <img src="https://s-media-cache-ak0.pinimg.com/236x/a3/e1/04/a3e1048687b88956cd4edbc4b38a98b2.jpg" alt="">

  <div class="col-xs-12">
    Power Supplies
  </div>

  <!--- HERE I THINK -->

  <div class="col-xs-12">
    Lorem ipsum dolor sit amet, consectetuer et adipiscing elit. Aenean commodo ligula eget dolor.
    <a href="#">View range</a>
  </div>
</a>

＆＃13;

在打开第二个链接之前，您尚未关闭第一个链接。

看来broswer已经做出了相当合理的选择，因为链接不能包含链接，因此在适当的时候关闭它是合适的。

Answer 2

您不能将块元素放在内联元素中。

这是正确的：

  <div><a></a></div>

这是不正确的：

  <a><div></div></a>

如果您想编写清晰，正确且跨浏览器的代码，则必须重新考虑您的结构。

您可以使用css替换块元素以进行内联和样式设置：

   <a><span></span></a>

   a > span { display:block }

祝你好运！

浏览器中的额外锚标签

2 个答案: