Join the AMA (Ask Me Anything) with the Firefox leadership team to celebrate Firefox 20th anniversary and discuss Firefox’s future on Mozilla Connect. Mark your calendar on Thursday, November 14, 18:00 - 20:00 UTC!

This site will have limited functionality while we undergo maintenance to improve your experience. If an article doesn't solve your issue and you want to ask a question, we have our support community waiting to help you at @FirefoxSupport on Twitter and/r/firefox on Reddit.

Avatar for Username

ค้นหาฝ่ายสนับสนุน

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

เรียนรู้เพิ่มเติม

หัวข้อนี้ถูกเก็บถาวรแล้ว โปรดถามคำถามใหม่หากคุณต้องการความช่วยเหลือ

Basic Layout not rendering correctly.

  • 2 การตอบกลับ
  • 1 คนมีปัญหานี้
  • 6 ครั้งที่ดู
  • ตอบกลับล่าสุดโดย 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.

การตอบกลับทั้งหมด (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;