当焦点在图像上时，我想在图像周围有一条虚线。 但是一旦我添加outline-style: dotted;，这就不起作用. 我可以删除style = "display:block"，但是虚线没有完全显示在图像周围。 我的代码在Mozilla Firefox中运行良好，但在Microsoft Edge，Internet Explorer，Google Chrome，Opera和Safari中不起作用。
我该怎么做才能使图像周围的虚线在所有浏览器中都可见？
这是我的代码：
<html>
<head>
<style type = "text/css">
a:focus {
outline-width: 2px;
outline-style: dotted;
outline-color: #ff0000;
}
</style>
</head>
<body>
<input type = "text" tabindex = "10" style = "width:200px" value = "Click here and then press 'Tab'"><p>
<a href = "" tabindex = "20">Link 1</a><p>
<a href = "" tabindex = "30"><img src = "image.gif" style = "display:block"></a><p>
<a href = "" tabindex = "40">Link 2</a><p>
</body>
</html>尝试在父锚点上inline-block，在图像上block。这在Edge/Chrome中对我有用。
<html>
<head>
<style type = "text/css">
a:focus {
outline-width: 2px;
outline-style: dotted;
outline-color: #ff0000;
}
</style>
</head>
<body>
<input type = "text" tabindex = "10" style = "width:200px" value = "Click here and then press 'Tab'"><p>
<a href = "" tabindex = "20">Link 1</a><p>
<a href = "" tabindex = "30" style = "display:inline-block"><img src = "image.gif" style = "display:block"></a><p>
<a href = "" tabindex = "40">Link 2</a><p>
</body>
</html>这里有一个在 Safari 中也有效的解决方法：
(注意：默认情况下，您无法使用"Tab"键将焦点设置为Safari中的锚点(
<html>
<head>
<style type = "text/css">
a:focus {
outline-width: 2px;
outline-style: dotted;
outline-color: #ff0000;
}
div:focus {
outline-width: 2px;
outline-style: dotted;
outline-color: #ff0000;
}
</style>
</head>
<body>
<input type = "text" tabindex = "10" style = "width:200px" value = "Click here and then press 'Tab'"><p>
<a href = "" tabindex = "20">This tab stop doesn't work in Safari</a><p>
<div style = "color:blue; text-decoration:underline; cursor:pointer; user-select:none; -khtml-user-select:none; -moz-user-select:none; -ms-user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; display:inline-block" onclick = "window.location.href = ''" onkeypress = "if (event.keyCode == 13) {window.location.href = ''}" tabindex = "30">This tab stop also works with Safari</div><p>
<div style = "cursor:pointer; display:inline-block" tabindex = "40"><img src = "image.gif" style = "display:block"></div><p>
<div style = "color:blue; text-decoration:underline; cursor:pointer; user-select:none; -khtml-user-select:none; -moz-user-select:none; -ms-user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; display:inline-block" onclick = "window.location.href = ''" onkeypress = "if (event.keyCode == 13) {window.location.href = ''}" tabindex = "50">This tab stop also works with Safari</div><p>
</body>
</html>