Поиск в Поддержке

Избегайте мошенников, выдающих себя за службу поддержки. Мы никогда не попросим вас позвонить, отправить текстовое сообщение или поделиться личной информацией. Сообщайте о подозрительной активности, используя функцию «Пожаловаться».

Learn More

Text Out of alignment (with GaugeMeter.js)

  • 8 ответов
  • 1 имеет эту проблему
  • 21 просмотр
  • Последний ответ от yongseong.liew

more options

I have a website that uses GaugeMeter.js component. The text of the gauges are out of alignment (as shown in the screenshot) -- which never the case when it is opened with Chrome Browser (i.e. always centered and within the circle/arc).

Strangely, sometime it works well when I started to change the Firefox window width (it is a responsive page).

Anyone came across this? Any idea to solve this?

Приложенные скриншоты

Выбранное решение

The problem appears to be caused by this rule:

.GaugeMeter {
  display: inline;
}


Why is that needed? You could try using inline-block or using the default (block).

Прочитайте этот ответ в контексте 👍 0

Все ответы (8)

more options

Check your zoom controls.

<Control> (Mac=<Command>) + (plus) enlarge - (minus) reduce 0 (zero) restore

more options

Can you post a link to a publicly accessible page (i.e. no authentication or signing on required)?

more options

yongseong.liew said

Strangely, sometime it works well when I started to change the Firefox window width (it is a responsive page).

Probably you have an event handler tied to the resize event. If you call that handler after page load, does that have any effect on the problem?

more options

cor-el said

Can you post a link to a publicly accessible page (i.e. no authentication or signing on required)?

Zipped an offline version which the static page shows the same "out of alignment" issue when viewed in Firefox.

Download link: [https://demo-site.signoff.live/firefo.../firefox-rendering-issue.zip]

Изменено yongseong.liew

more options

cor-el said

Can you post a link to a publicly accessible page (i.e. no authentication or signing on required)?

Zipped an offline copy and the static page shows the same issue when viewed offline using Firefox.

Download link: https://demo-site.signoff.live/firefox-rendering-issue.zip

Изменено yongseong.liew

more options

cor-el said

Can you post a link to a publicly accessible page (i.e. no authentication or signing on required)?

Zipped an offline copy and the static page shows the same issue when viewed offline using Firefox.

Download link: https://demo-site.signoff.live/firefox-rendering-issue.zip

more options

Выбранное решение

The problem appears to be caused by this rule:

.GaugeMeter {
  display: inline;
}


Why is that needed? You could try using inline-block or using the default (block).

more options

jscher2000 said

The problem appears to be caused by this rule: .GaugeMeter { display: inline; }
Why is that needed? You could try using inline-block or using the default (block).

It comes as the default CSS from the GaugeMeter.js library sample.

Indeed, removing that solves the problem.

It is interesting that Chrome/Safari (Webkit) treats that line differently and never show similar behavior.