html - 浏览器添加额外的结束标签

问题描述

我有这个代码：

.link {
  cursor: pointer;
}

.dropdown-content {
  margin-top: 10px;
  margin-left: -10px;
  position: absolute;
  min-width: 100px;
  min-height: 50px;
  color: #5A3895;
  float: left;
  display: none;
  background-color: #FDEBCF;
  border: 3px solid #999999;
}

.inside-dropdown-content {
  margin-top: 10px;
  margin-left: -10px;
  position: absolute;
  min-width: 100px;
  min-height: 50px;
  color: #5A3895;
  float: left;
  display: none;
  background-color: #FDEBCF;
  border: 3px solid #999999;
}

.dropdown-button:hover>.dropdown-content {
  display: block;
  background-color: #FDEBCF;
}

.dropdown-button:hover {
  background-color: #FDEBCF;
}

.inside-dropdown-button:hover>.inside-dropdown-content {
  display: block;
  background-color: #FDEBCF;
}

.inside-dropdown-button:hover {
  background-color: #FDEBCF;
}

.name-label p {
  font-size: 30px;
  margin: auto;
  text-align: center;
}

.name-label {
  float: left;
  padding-left: 10px;
}

.header {
  border: 1.5px solid #999999;
  background-color: #FDEBCF;
  font-size: 20px;
  font-family: Arial;
  overflow: hidden;
}

button:not(.impressum-link):not(.inside-dropdown-button) {
  font-size: 20px;
  min-width: 100px;
  min-height: 50px;
  color: #5A3895;
  float: left;
  background-color: #FDEBCF;
  border-style: solid;
  border-color: #999999;
  border-width: 1px 3px 1px 3px;
}

.impressum-link {
  font-size: 20px;
  min-width: 100px;
  min-height: 50px;
  color: #5A3895;
  float: right;
  background-color: #FDEBCF;
  border-style: solid;
  border-color: #999999;
  border-width: 1px 3px 1px 3px;
}

<div class="header">

  <div class="dropdown">
    <button type="button" class="link">
<span>Home</span>
</button>
  </div>


  <div class="dropdown">
    <button type="button" class="dropdown-button">
<span>Publications</span>
  <div class="dropdown-content">
    <button type="button" class="inside-dropdown-button">
      <span>Recent Publications</span>
      <div class="inside-dropdown-content">
        <p>year</p>
        <a href="/">A link to whatever</a>
      </div>
    </button><a href="/">Other Publications</a></div>
  </button>

</div>

<div class="name-label">
  <p>Website</p>
</div>

<button type="button" class="link impressum-link">
<span>Impressum</span>
</button>

</div>

我把所有东西都放进去，因为我不知道是什么导致了问题。

我想拥有的inside-dropdown-button内部dropdown-content，但浏览器（在 Firefox 和 Chrome 上测试）似乎发生了变化

<div class="dropdown">
<button type="button" class="dropdown-button">
<span>Publications</span>
  <div class="dropdown-content">
    <button type="button" class="inside-dropdown-button">
      <span>Recent Publications</span>
      <div class="inside-dropdown-content">
        <p>year</p>
        <a href="/">A link to whatever</a>
      </div>
    </button><a href="/">Other Publications</a></div></button>
    
  </div>

到：

<div class="dropdown">
<button type="button" class="dropdown-button">
<span>Publications</span>
  <div class="dropdown-content">
    </div></button><button type="button" class="inside-dropdown-button">
      <span>Recent Publications</span>
      <div class="inside-dropdown-content">
        <p>year</p>
        <a href="/">A link to whatever</a>
      </div>
    </button><a href="/">Other Publications</a></div>

注意第 5 行</div></button>之前的额外内容。<button type="button"这个额外的</div>原因有很多</div>，弄乱了标题类，并放在impressum-link标题之外。为什么会这样，我该如何解决？

如果我在浏览器中更改它，它可以工作，但是当我将代码从浏览器复制到脚本并删除额外的标签时，它会再次将它们放入。

标签： htmlcss

html - 浏览器添加额外的结束标签

问题描述

解决方案

推荐阅读