似乎 firefox 和 IE 默认为黑色虚线轮廓，而 chrome 默认为浅蓝色实心轮廓。
我试图通过这样做来改变它:
a{
outline-style: dotted;
outline-color: black;
}
这似乎造成了一场灾难，因为突然间所有链接都变成了黑色虚线轮廓，即使没有悬停或聚焦。 这很糟糕，因为“轮廓”是唯一可以区分鼠标焦点和键盘键焦点的东西。
关于如何使 chrome 的轮廓看起来像其他轮廓的任何其他想法？
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body{
font-size: 1.5em;
font-family: verdana;
}
.zone2 a{
outline-width: thick;
outline-color: red;
}
.zone3 a{
outline-style: solid;
}
</style>
</head>
<body>
outline tests:<br/>
<div class="zone1">
<a href="#">test link 1</a><br/>
<a href="#">test link 2</a><br/>
<a href="#">test link 3</a><br/>
</div>
<br/>
<div class="zone2">
<a href="#">test link 1</a><br/>
<a href="#">test link 2</a><br/>
<a href="#">test link 3</a><br/>
</div>
<br/>
<div class="zone3">
<a href="#">test link 1</a><br/>
<a href="#">test link 2</a><br/>
<a href="#">test link 3</a><br/>
</div>
</body>
</html>最佳答案
您必须将规则应用到焦点状态，例如 a:focus 而不是直接使用 a。
关于html - 与 Firefox 和 Internet Explorer 相比，Chrome 中的大纲样式不同，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32298977/