Question

似乎firefox和IE默认为黑色虚线轮廓，而chrome默认为浅蓝色实线轮廓。

我尝试通过这样做来改变它：

a{
 outline-style: dotted;
 outline-color: black;
}

这似乎是一场灾难，因为突然所有的链接都有一个黑色的虚线轮廓，甚至没有徘徊或聚焦。这很糟糕，因为＆＃34;概述＆＃34;是唯一可以区分鼠标焦点和键盘键焦点的东西。

关于如何使chrome的轮廓看起来像其他人的任何其他想法？

＆＃13;

<!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>

＆＃13;

Answer 1

您必须将规则应用于焦点状态，例如a:focus而不是a。

与firefox和Internet Explorer相比，chrome中的大纲样式不同

1 个答案: