JSFiddle CSS проблема?Граница ссылки вокруг изображений - PullRequest
Новая
       10

JSFiddle CSS проблема?Граница ссылки вокруг изображений

0 голосов
/ 29 ноября 2018

У меня один и тот же код в 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>

1 Ответ

0 голосов
/ 29 ноября 2018

ответ Stender является лучшим, всегда используйте em em: 

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

, потому что JSFiddle добавил границу.Если вы проверите код, вы увидите: 

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