Question

我创建了两个充当超链接的按钮。它们在Chrome上运行，但在Firefox上没有响应。

对不起，我是html / css的新手，请不要做我可能做错的事情。

.btn-language-group {
  position: fixed;
  z-index: 120;
  bottom: 30px;
  right: 30px;
  background-color: Transparent;
}

<div class="btn-language-group">
  <button class="button button1">
		        <a href="index-B.html"> flag
			        <i class="flag-icon flag-icon-es"></i></button>
  </a>

  <button class="button button2">
		        <a href="index.html"> flag
			        <i class="flag-icon flag-icon-gb-wls"></i></button>
  </a>
  </button>
</div>

Answer 1

Python Application Layouts: A Reference – Real Python网站已回答您的问题。引用它们：

Spec says, that inside of <button> you can have only phrasing content. That is, the <a> element inside <button> won't be interactive (clickable). Your code is simply invalid.

对元素进行简单的重新排序应该可以解决您的问题。

<div class="btn-language-group">
    <a href="index-B.html"> 
       <button class="button button1">
	  <i class="flag-icon flag-icon-es">flag</i>
       </button>
    </a>

  
    <a href="index.html">
      <button class="button button2">           
        <i class="flag-icon flag-icon-gb-wls">flag</i>
      </button>
    </a>
</div>

免责声明：我不认为这是最佳做法。我不知道您将如何“正常”执行此操作。

Answer 2

您的HTML在语法上不正确。

  <button class="button button1">
                <a href="index-B.html"> flag
                    <i class="flag-icon flag-icon-es"></i></button>
  </a>

在这里，您要关闭button标签，然后再关闭a标签。

Web browsers will attempt to correct for HTML errors, and make a guess at how to close the tags properly，而不仅仅是在页面上显示错误，但这可能导致结果混乱。解决该问题的正确方法是确保您的HTML语法正确。

此外-似乎您正在尝试将a标记嵌套在button标记内-您不需要这样做。

通常情况下，请查看a tag和button tag以及read this article about a vs button的文档，将a用作链接到某个地方，并使用button作为操作。

如果您想将a标签设置为按钮样式，则只需使用CSS设置标签样式

例如：

a {
 text-decoration: none; 
 background-color: #ddd; 
 padding: 1em;
 border: 2px solid #666; 
 border-radius: 1em;
 margin: 1em; 
 display:inline-block; 
 
}

a:hover {
 background-color: #ccc; 
}

<a href = "#"> hello world! </a>

或者您可以使用Bootstrap

之类的库

Firefox中无响应的超链接

2 个答案: