css - JSFiddle CSS 问题?图像周围的链接边框
问题描述
我在 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>
解决方案
stender 的答案是最好的,总是使用 em 单位:
.one img, .two img {
max-width: 100%;
}
因为 JSFiddle 添加了边框。如果您检查代码,您将看到:
*, ::after, ::before {
box-sizing: border-box;
}
推荐阅读
- reactjs - 如何在浏览器中为 React SPA 保留 Auth0 登录状态
- python - Numpy 神经网络成本计算:第一次运行后结果变化
- string - 为什么这个 bash 字符串连接失败?
- php - PHP 命令行脚本 Windows Start In 参数
- c# - .NET CORE 2 MVC UseStatusCodePagesWithReExecute Windows Auth 401 问题
- ruby-on-rails - ArgumentError: Unknown key: origin using geokit-rails
- bash - 这个 youtube-dl 自动脚本有什么问题?
- scala - scala中数字序列中的子序列
- apache - 在重定向上添加 $ 停止工作,rewriteRule 不起作用
- gitlab - Gitlab-runner 使用 shell 执行器运行 Docker 命令