css 单击href属性重定向后显示奇怪的矩形

vjrehmav  于 2023-01-14  发布在  其他
关注(0)|答案(3)|浏览(98)

我决定与图像重定向,但我有一个小问题。
看这个屏幕:https://i.stack.imgur.com/eEnNB.png
这是这个项目:
<p><div><a title="Home" href="/home"><img src="/icons/home.svg" width="55" height="55" /></a></div></p>
它显示奇怪的矩形,我不想显示它。你有什么想法吗?

px9o7tmv

px9o7tmv1#

这个轮廓是一个辅助功能(可以作为CSS主题的一部分添加,但是没有完整的代码库上下文就很难知道)。但是,删除它不是一个好主意,因为它会使视觉障碍的人的体验变差(检查http://www.outlinenone.com/)。
然而,我们能做的是使它看起来更好,您有一个<div>,其中一个<a>嵌套在一个<p>中,这就是为什么矩形没有包围整个图标,而是重叠在它上面,因为它认为它是一个内联元素(Ideally, you don't want to use block elements in p tags).在这里,你会得到块元素,比如<div><p>里面的<img>).所以我推荐的是:
1.删除<p><div>,并仅将其保留在<a>
1.将display: inline-block CSS属性添加到<a>标记,结果为:

<a style="display:inline-block;" title="Home" href="/home">
      <img src="/icons/home.svg" width="55" height="55" />
    </a>

如果需要块元素,只需删除<p>标记:

<div>
        <a title="Home" href="/home">
          <img src="/icons/home.svg" width="55" height="55" />
        </a>
    </div>
qnakjoqk

qnakjoqk2#

如果没有完整的背景,将很难回答,但:
1.尝试设置元素display:blockdisplay:inline-block
1.尝试将IMG宽度和高度设置为style="width:55px;height:55px"

ct3nt3jp

ct3nt3jp3#

display: inline-block添加到<a>标记

<p>
<div>
<a style="display:inline-block" title="Home" href="/home">
<img src="https://media.istockphoto.com/id/1357549139/photo/shot-of-an-adorable-baby-boy-wearing-a-hoody-towel.webp?s=612x612&w=is&k=20&c=MvuPLKqQhs7f6ZIsPf8oTgw08OiCvmmjJNeNdL0FG4M=" width="55" height="55" />
</a>
</div>
</p>

相关问题