JSFiddle CSS 问题？图像周围的链接边框答案

【问题标题】：JSFiddle CSS problem? Link border around imagesJSFiddle CSS 问题？图像周围的链接边框
【发布时间】：2018-11-29 14:45:09
【问题描述】：

我在 Plunker 和 JSFiddle 中有相同的代码：

如您所见，在 JSFiddle 中，图像周围的链接边框在这两种情况下都是错误的，但在 Plunker 中它们是正确的。

这是 JSFiddle 的问题吗？如果是这样，是否有一些 CSS 可以用来修复它，而不会在其他地方破坏它？

这里是代码。 HTML：

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

.one {
  border: solid 2px gray;
  width: 100px;
  height: 100px;
  padding: 3px;
  margin: 2px;
  float: left;
}

.one:hover {
  border-color: #FF9900;
}

.two {
  border: solid 2px gray;
  width: 100px;
  height: 100px;
  padding: 3px;
  margin: 2px;
  display: inline-block;
}

.two:hover {
  border-color: #FF9900;
}

<h3>Problem One - with float</h3>
<p>This is a problem in jsfiddle, but not plnkr</p>
<a href="#" class="one"><img src="https://en.js.cx/gallery/img6-thumb.jpg"></a>
<a href="#" class="one"><img src="https://en.js.cx/gallery/img5-thumb.jpg"></a>

<div class="clearfix"></div>
<h3>Problem Two - without float</h3>
<p>This is a problem in jsfiddle, but not plnkr</p>
<a href="#" class="two"><img src="https://en.js.cx/gallery/img6-thumb.jpg"></a>
<a href="#" class="two"><img src="https://en.js.cx/gallery/img5-thumb.jpg"></a>

【问题讨论】：

.one img, .two img { max-width:100%; }
jsfiddle.net/b5we6tp4
我希望小提琴版本是正确的，因为您设置的宽度和填充等于图像的大小，所以我希望图像溢出 div。也许 jsfiddle 添加了边框大小，而 plunkr 没有

标签： css jsfiddle

【解决方案1】：

stender's 答案是最好的，总是使用 em 单位：

.one img, .two img {
  max-width: 100%;
}

因为 JSFiddle 添加了边框。如果您检查代码，您将看到：

*, ::after, ::before {
  box-sizing: border-box;
}

【讨论】：