Как я могу исправить "большие" контуры в Firefox, когда высота строки и размер шрифта увеличены? - PullRequest
Новая
       24

Как я могу исправить "большие" контуры в Firefox, когда высота строки и размер шрифта увеличены?

0 голосов
/ 24 января 2019

Я использую CSS из внешней библиотеки (я должен использовать), чтобы построить страницу.Я натолкнулся на проблему, заключающуюся в том, что контур вокруг иконки в Firefox больше (и распространяется на другие элементы), чем в Chrome.

Я уменьшил его до более минималистичной версии и поместил в jsfiddle: http://jsfiddle.net/73fu6L1q/

HTML: 

<div class="somediv foo">
  &nbsp;
</div>

<div class="somediv bar">
  &nbsp;
</div>

CSS: 

.somediv {
  background-image: url("https://cdn1.iconfinder.com/data/icons/hawcons/32/700035-icon-77-document-file-css-16.png");
  background-repeat: no-repeat;
  outline-offset: 3px;
  outline-style: solid;
  outline-width: 3px;
  position: absolute;
  left: 50px;
  top: 50px;
}

.foo {
  margin-top: 100px;
  font-size: 40px;
  line-height: 22px;
  outline-color: red;
}

.bar {
  outline-color: blue;
}

Я предполагаю, что это как-то зависит от высоты строки и / или размера шрифта (или, может быть, этотолько увеличивает проблему?) но не знаю, как сделать так, чтобы она выглядела одинаково (или, по крайней мере, достаточно похожа).Кто-нибудь может дать мне подсказку о том, что попробовать или объяснить, почему это происходит?

Вот как для меня выглядит результат на jsfiddle:

comparison chrome/ff

...