본 사이트는 여러분의 사용자 경험을 개선하기 위해 유지 보수를 진행하는 동안 기능이 제한됩니다. 도움말로 문제가 해결되지 않고 질문을 하고 싶다면 Twitter의 @FirefoxSupport 및 Reddit의 /r/firefox 채널을 활용하세요.

Mozilla 도움말 검색

고객 지원 사기를 피하세요. 저희는 여러분께 절대로 전화를 걸거나 문자를 보내거나 개인 정보를 공유하도록 요청하지 않습니다. "악용 사례 신고"옵션을 사용하여 의심스러운 활동을 신고해 주세요.

자세히 살펴보기

website beancarclub.org.uk loads OK on Safari but 2 of the pages have overlapping text /photos on firefox

  • 2 답장
  • 2 이 문제를 만남
  • 1 보기
  • 최종 답변자: cor-el

more options

We have tried altering the offending pages and keeping text and pictures in separate boxes but they just come out with overlaps in different places. Site appears fine, then when published the faults appear.

We have tried altering the offending pages and keeping text and pictures in separate boxes but they just come out with overlaps in different places. Site appears fine, then when published the faults appear.

선택된 해결법

Hi,

I can see this occurring on http://beancarclub.org.uk/Short-Bean-Car-History/ . I believe what's happening here is that Chrome and Firefox are calculating the line height of the paragraphs differently. The space between the lines is set to be 16.9px; Firefox rounds that up to 17px, while Chrome rounds it down to 16px. This causes the paragraphs to be shorter in Chrome, meaning that they don't overlap with the images below.

There are several things you could do to fix this, although if you're using some kind of software to generate the site I'm not sure how many of these are possible:

  1. Change the images so that they always appear after the paragraph, rather than a certain distance from the top of the page (which is what they are doing right now).
  2. Pick an integer (either 16.0 or 17.0px) for the line-height, so that the paragraphs are the same height in both browsers.

Hope that helps!

문맥에 따라 이 답변을 읽어주세요 👍 1

모든 댓글 (2)

more options

선택된 해결법

Hi,

I can see this occurring on http://beancarclub.org.uk/Short-Bean-Car-History/ . I believe what's happening here is that Chrome and Firefox are calculating the line height of the paragraphs differently. The space between the lines is set to be 16.9px; Firefox rounds that up to 17px, while Chrome rounds it down to 16px. This causes the paragraphs to be shorter in Chrome, meaning that they don't overlap with the images below.

There are several things you could do to fix this, although if you're using some kind of software to generate the site I'm not sure how many of these are possible:

  1. Change the images so that they always appear after the paragraph, rather than a certain distance from the top of the page (which is what they are doing right now).
  2. Pick an integer (either 16.0 or 17.0px) for the line-height, so that the paragraphs are the same height in both browsers.

Hope that helps!

more options

I need to switch to zoom text only and slightly zoom out (95%) to make the text appear properly. You need to avoid specifying the top and left position for each element exactly when text is involved since you can't predict what font a visitor or browser is using. All DIV containers are in some random order: the Bean text is #wb_element_instance46 and the image under it is #wb_element_instance30. It is always best to let the browser calculate the height of text containers.