时间戳

首页 > 解决方案 > 网页上的图像周围看不到虚线焦点线

html - 网页上的图像周围看不到虚线焦点线

问题描述

当焦点在图像上时，我想在图像周围有一条虚线。但这在我添加后不起作用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>

标签： htmlcss

解决方案

尝试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>

推荐阅读