Question

我为一个链接到我所做网站的html按钮制作了一大块代码我按照w3学校教程制作了按钮使用Chrome，Edge和Safari浏览时很有用，不幸的是，Internet Explorer 11和Firefox Quantum（58.0）并非如此... 更清楚的是，按钮显示正确，但点击它不会加载网站页面。

这是我的代码：

<!DOCTYPE html>
<head>
   <style type="text/css">
      .bluebutton {
      padding: 10px;
      width: 100%;
      font-size: 200%;
      margin-left: auto;
      margin-right: auto;
      background-color: #337ab7;
      border-radius: 7px;
      box-shadow: 0 5px 20px 0 rgba(0,0,0,0.2), 0 3px 20px 0 rgba(0,0,0,0.05);
      }  
      .bluebutton:hover {background-color: #3e8e41}
      .bluebutton:active {
      background-color: #3e8e41;
      transform: translateY(5px);
      }
      .bluebutton span {
      cursor: pointer;
      display: inline-block;
      position: relative;
      transition: 0.5s;
      }
      .bluebutton span:after {
      content: '\00bb';
      position: absolute;
      opacity: 0;
      top: 0;
      right: -20px;
      transition: 0.5s;
      }
      .bluebutton:hover span {
      padding-right: 25px;
      }
      .bluebutton:hover span:after {
      opacity: 1;
      right: 0;
      } 
   </style>
</head>
<body>
   <button class="bluebutton">
   <a href="https://www.youtube.com" style="color: white">
   <span>Access Website</span>
   </a>
   </button>
</body>
</html>

如果可能的话，我想将css样式部分保留在html代码中。我很感激你的帮助。
最好的问候，

Answer 1

您可以轻松地在<a>代码上执行大部分按钮自定义操作，而无需使用<button>代码。

Answer 2

So I finally found a solution to my problem !
First I would like to quote @Silverman42 who also had the same idea than me when I was trying to find an answer in the mean time: using <a> tag is the first key to solve the compatibility problem. It works for all web browsers cited in my question.
The other key was to replace the CSS style options width: 100%; , margin-left: auto; and margin-right: auto; by display: block; to create a block for the element and then just text-align: center to center back the text of the link on the button. See below complete solution that worked for me:

<!DOCTYPE html>
<head>
   <style type="text/css">
      .bluebutton {
      display: block;
      text-align: center;
      padding: 10px;
      font-size: 200%;
      background-color: #337ab7;
      border-radius: 7px;
      box-shadow: 0 5px 20px 0 rgba(0,0,0,0.2), 0 3px 20px 0 rgba(0,0,0,0.05);
      }  
      .bluebutton:hover {background-color: #3e8e41}
      .bluebutton:active {
      background-color: #3e8e41;
      transform: translateY(5px);
      }
      .bluebutton span {
      cursor: pointer;
      display: inline-block;
      position: relative;
      transition: 0.5s;
      }
      .bluebutton span:after {
      content: '\00bb';
      position: absolute;
      opacity: 0;
      top: 0;
      right: -20px;
      transition: 0.5s;
      }
      .bluebutton:hover span {
      padding-right: 25px;
      }
      .bluebutton:hover span:after {
      opacity: 1;
      right: 0;
      } 
   </style>
</head>
<body>
   <a href="https://www.youtube.com" class="bluebutton" style="color: white">
   <span>Access Website</span>
   </a>
</body>
</html>

HTML - 与Internet Explorer和Firefox for Button的兼容性

2 个答案: