不会改变布局的图片悬停边框

这是 CSS 生活中的一个事实，任何块级元素的“边框”都会被计算到其最终的布局框大小中。这意味着，如果您在悬停时添加一个边框到一个以前没有完全相同大小边框的元素上，您将会导致布局发生变化。这绝对是我最讨厌的事情之一，当我看到它出现在最终的设计中时。我发现这些小小的变化，即使只有 1 个像素，也会让人感觉不和谐和笨拙。（一个简短的视频示例）

CSS 为我们提供了一个非常有用的属性，它允许创建不会影响布局的边框，那就是outline属性。Outline 很不错，但它也有局限性，您无法只应用其中的一面。它要么全部应用，要么不应用。此外，outline 只能应用在元素的外部。我们将使用普通的border属性来解决这个问题，从而创建一些内部边框。

 

查看演示

 

问题 CSS

#example-problem a img, #example-problem a   { border: none; float: left; }
#example-problem a:hover                     { border: 3px solid black; }

这段 CSS 在悬停时应用了一个边框，而之前并没有边框。由此导致布局问题。

修复方案 #1：内部边框

#example-one a img, #example-one a           { border: none; overflow: hidden; float: left; }
#example-one a:hover                         { border: 3px solid black; }
#example-one a:hover img                     { margin: -3px; }

这段 CSS 在图片的四边应用了一个负边距，该边距的大小与边框的大小相同。这将把边框拉到内部，不会导致布局发生变化。

修复方案 #2：外部边框

#example-two a img, #example-two a           { border: none; float: left; }
#example-two a                               { margin: 3px; }
#example-two a:hover                         { outline: 3px solid black; }

这段 CSS 使用 outline 属性来确保布局不发生变化。或者，您可以应用与背景色相同的边框颜色，并在悬停时仅更改其颜色，但这更优雅。

感谢 Ney Ricardo Barão，他从 这个网站 获得了这个想法。

修复方案 #3：更改盒子模型

如果元素的宽度包含了边框宽度，就不会出现这个问题。 所以您可以更改它。

修复方案 #4：裁剪

读者 Mattijs Bliek 提供了另一个想法

然而，当图片位于一个包含元素内部时，有一个更简单的跨浏览器解决方案。您可以使用 css clip 属性来裁剪图片，然后应用一个常规边框。您只需要将图片的裁剪区域移动与边框宽度相同的像素数。例如，如果您有一个 60×60 的图片，并且想要一个 1 像素的边框，您可以在左侧裁剪 1 像素，顶部裁剪 1 像素，并将其宽度和高度设置为 58 像素（所有这些都通过 css clip 属性完成）。