HTML -与for和Firefox兼容
HTML -与for和Firefox兼容
提问于 2018-02-01 16:26:15
我做了一个html按钮链接到我做的网站的代码块。
我按照w3学校的教程做了这个按钮。
它在使用Chrome、Edge和Safari进行浏览时工作，不幸的是，Internet 11和Firefox量子(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代码中。我很感谢你的帮助。
诚挚的问候,
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-02-03 09:00:40
所以我终于找到了解决问题的办法！
首先，我想引用@Silverman42 42的话，他在我试图找到答案的同时也有着和我一样的想法:使用<a>标记是解决兼容性问题的第一个关键。它适用于我问题中引用的所有网页浏览器。
另一个关键是将CSS样式选项width: 100%;、margin-left: auto;和margin-right: auto;替换为display: block;，为元素创建一个块，然后只为text-align: center将链接的文本居中到按钮上。请参阅下面对我有用的完整解决方案：
<!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>Stack Overflow用户
发布于 2018-02-02 01:30:49
您可以轻松地完成<a>标记上的大多数按钮定制，而不需要使用<button>标记。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48567397
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号