Fungování této stránky je z důvodu údržby dočasně omezeno. Pokud žádný článek nápovědy nevyřeší váš problém a potřebujete se zeptat na další řešení, napište nám na Twitter @FirefoxSupport nebo Reddit /r/firefox.

Avatar for Username

Prohledat stránky podpory

Vyhněte se podvodům. Za účelem poskytnutí podpory vás nikdy nežádáme, abyste zavolali nebo poslali SMS na nějaké telefonní číslo nebo abyste sdělili své osobní údaje. Jakékoliv podezřelé chování nám prosím nahlaste pomocí odkazu „Nahlásit zneužití“.

Zjistit více

Toto vlákno bylo archivováno. Pokud potřebujete pomoci, založte prosím nový dotaz.

Basic Layout not rendering correctly.

  • 2 odpovědi
  • 1 má tento problém
  • 6 zobrazení
  • Poslední odpověď od guigs

MyFriendBrad
MyFriendBrad
more options

Hello,

I've been trying to debug a problem I was noticing on my production websites, so I dumbed it down to a quick codepen to show off the issue. http://codepen.io/anon/pen/GgoBNJ

Basically, standard fonts (helvetica, arial, etc.) are not rendering correctly within a div. For some reason the text is pushing itself up ~2 pixels. Not to mention, fonts are looking very jagged within the browser for no apparent reason.

I am setting up a basic div with hardly any styles and yet this produces two different renderings within FF and Chrome

Hello

.box{ 

 font-family: Helvetica, Arial, Sans-serif;
 font-size: 14px;
 border: 2px solid #FF5500;
 display: inline-block;
 width: 100px;

}

This is causing me all sorts of headaches with designers who are trying to make layouts pixel perfect as I have zero control over something like this. Any help would be greatly appreciated!

Thanks in advance.

Hello, I've been trying to debug a problem I was noticing on my production websites, so I dumbed it down to a quick codepen to show off the issue. http://codepen.io/anon/pen/GgoBNJ Basically, standard fonts (helvetica, arial, etc.) are not rendering correctly within a div. For some reason the text is pushing itself up ~2 pixels. Not to mention, fonts are looking very jagged within the browser for no apparent reason. I am setting up a basic div with hardly any styles and yet this produces two different renderings within FF and Chrome <div> <div class="box">Hello</div> </div> .box{ font-family: Helvetica, Arial, Sans-serif; font-size: 14px; border: 2px solid #FF5500; display: inline-block; width: 100px; } This is causing me all sorts of headaches with designers who are trying to make layouts pixel perfect as I have zero control over something like this. Any help would be greatly appreciated! Thanks in advance.

Všechny odpovědi (2)

cor-el
cor-el
  • Moderator
  • Top 10 Contributor
more options

You may have zoomed the page(s) by accident. Reset the page zoom on pages that cause problems.

  • View > Zoom > Reset (Ctrl/Command+0 (zero))

You can right-click on a web page and select "Inspect Element" to open the Inspector (Firefox/Tools > Web Developer). You can check the font used for selected text in the Font tab in the right pane of the Inspector.

You can do a font test to see if you can identify corrupted font(s).

You can try different default fonts and temporarily disable website fonts to test the selected default font.

  • Tools > Options > Content : Fonts & Colors > Advanced
  • [ ] "Allow pages to choose their own fonts, instead of my selections above"
guigs
guigs
more options

It may also be helpful in the meantime to try: font-family: "Helvetica Neue",Helvetica, Arial,sans serif;