边缘不在:链接上显示背景颜色
边缘不在:链接上显示背景颜色
提问于 2017-08-15 23:12:05
https://fivosm.github.io/在ie，firefox，chrome上测试正常，a:link的背景是红色的。在边缘，背景不是红色的，直到我将鼠标悬停在它上面。
我不知道从哪里开始，我的谷歌搜索没有显示任何与我的问题相关的内容。这是我的pastebin link，以防格式再次混乱
<!DOCTYPE html>
<html>
<head>
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="favicons/apple-touch-icon-57x57.png" /><link rel="apple-touch-icon-precomposed" sizes="114x114" href="favicons/apple-touch-icon-114x114.png" /><link rel="apple-touch-icon-precomposed" sizes="72x72" href="favicons/apple-touch-icon-72x72.png" /><link rel="apple-touch-icon-precomposed" sizes="144x144" href="favicons/apple-touch-icon-144x144.png" /><link rel="apple-touch-icon-precomposed" sizes="60x60" href="favicons/apple-touch-icon-60x60.png" /><link rel="apple-touch-icon-precomposed" sizes="120x120" href="favicons/apple-touch-icon-120x120.png" /><link rel="apple-touch-icon-precomposed" sizes="76x76" href="favicons/apple-touch-icon-76x76.png" /><link rel="apple-touch-icon-precomposed" sizes="152x152" href="favicons/apple-touch-icon-152x152.png" /><link rel="icon" type="image/png" href="favicons/favicon-196x196.png" sizes="196x196" /><link rel="icon" type="image/png" href="favicons/favicon-96x96.png" sizes="96x96" /><link rel="icon" type="image/png" href="favicons/favicon-32x32.png" sizes="32x32" /><link rel="icon" type="image/png" href="favicons/favicon-16x16.png" sizes="16x16" /><link rel="icon" type="image/png" href="favicons/favicon-128.png" sizes="128x128" /><meta name="application-name" content=" "/><meta name="msapplication-TileColor" content="#FFFFFF" /><meta name="msapplication-TileImage" content="favicons/mstile-144x144.png" /><meta name="msapplication-square70x70logo" content="favicons/mstile-70x70.png" /><meta name="msapplication-square150x150logo" content="favicons/mstile-150x150.png" /><meta name="msapplication-wide310x150logo" content="favicons/mstile-310x150.png" /><meta name="msapplication-square310x310logo" content="favicons/mstile-310x310.png" />
<meta name="description" content="All of my projects are stored here" />
<title>FivosM Projects</title>
<link rel="stylesheet" href="animate.css">
<style>
body {
backgroundColor = "#f5f5f5";
font-family: sans-serif;
text-align: center;
text-align: center;
-webkit-font-smoothing: antialiased;
}
.background{
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
}
div {
border-radius: 25px;
width: 270px;
height: 370px;
display: inline-block;
white-space: normal;
box-shadow: 0px 0px 6px #828282;
}
h1 {
text-shadow: 2px 2px 10px #d3d3d3;
}
small {
font-size: smaller;
}
.transparent{
background:rgba(255,255,255,0.9);
}
a:link {
background-color: #f44336;
color: white;
padding: 3px 6px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:visited {
background-color: #7b77ff;
color: white;
padding: 3px 6px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover, a:active{
background-color: red;
}
a:disabled, a[disabled]{
color: black;
background: rgb(255, 255, 255);
background: rgba(0, 0, 0, 0);
text-decoration: underline;
}
</style>
</head>
<script type="text/javascript">
function changebackground() {
document.body.style.backgroundColor = "#f5f5f5";
var viewport_w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
var viewport_h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
var geturl = "url(https://source.unsplash.com/category/nature/" + viewport_w + "x" + viewport_h + ")";
document.body.style.backgroundImage = geturl;
}
</script>
<body class="background" onload="changebackground();">
<div class = "body animated bounceInDown transparent">
<h1>My Projects: </h1>
<h3> Software: </h3>
<p><b>Pinger:</b> <a
href="https://cdn.rawgit.com/FivosM/Pinger/12b37fe2/Pinger.bat" target="_blank" download="Pinger"> Download </a> <a
href="https://github.com/FivosM/Pinger" target="_blank"> Github </a></p>
<h3> Games: </h3>
<p><b>HellBlocks:</b> <a href="https://fivosm.itch.io/hellblocks" target="_blank"> Itch.io page </a></p>
<h3> Websites: </h3>
<p><b>This website:</b> <a href="https://fivosm.github.io" target="_blank" > fivosm.github.io </a></p>
<p><small><a href="https://github.com/FivosM" target="_blank"
disabled="true"> Github </a> | <a href="https://fivosm.itch.io/" target="_blank"
disabled="true"> Itch.io </a> </small></p>
</div>
</body>
</html>回答 3
Stack Overflow用户
发布于 2017-08-15 23:23:33
定义一个的背景。还有一个:visited样式，将背景颜色设置为#7b77ff。如果你不需要链接按钮样式，就把它去掉。
a{
background-color: #f44336;
...
}
a:visited {
background-color: #7b77ff;
}Stack Overflow用户
发布于 2017-08-15 23:26:12
在我这方面，你所有按钮的背景在Chrome，FireFox和Edge中都工作得很好(请看:它们都以红色背景显示)。
你似乎还没有定义
a {
background-color: #f44336;
}相反，您使用的是:link和:visited
有没有可能您已经使用了Edge中的链接，并且它使用的是您为:visited设置的background-color？如果您不希望它们更改，请删除:visited css中的background-color
Stack Overflow用户
发布于 2017-08-16 23:01:24
看起来边缘不像模糊超过4px的文本阴影。
替换为：
.shadow {
text-shadow: 2px 2px 10px #d3d3d3;
}有了这个：
.shadow {
text-shadow: 2px 2px 4px #d3d3d3;
}解决了所有问题。谢谢。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/45695836
复制相关文章
相似问题
腾讯云开发者
