Avatar for Username

Vyhľadajte odpoveď

Vyhnite sa podvodom s podporou. Nikdy vás nebudeme žiadať, aby ste zavolali alebo poslali SMS na telefónne číslo alebo zdieľali osobné informácie. Nahláste prosím podozrivú aktivitu použitím voľby “Nahlásiť zneužitie”.

Ďalšie informácie

Táto téma bola archivovaná. Ak potrebujete pomôcť, založte prosím novú otázku.

Basic Layout not rendering correctly.

  • 2 odpovede
  • 1 má tento problém
  • 6 zobrazení
  • Posledná odpoveď 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šetky odpovede (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;