CSS problem with Chrome [closed]

It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center. 开发者_运维知识库 Closed 10 years ago.

I am having a problem with margins / line-height in one of our websites.

I am using a Jquery script to create a Drop Cap effect in the first letter of each sections, that adds a class to them. There are two types of dropcaps, as you can see. Google Chrome is not rendering the smaller ones correctly. You can compare with other browser and see the difference.

Any idea about why is this happening? Is there a fix / hack for this?

---

I managed to fix it by adjusting your line-height on your p tags.

I adjusted it to 1.8 - anything less and the third line of copy can not flow underneath the drop cap.

See the images:

alt text http://web17.twitpic.com/img/126705561-f3957c59ceac70c081953d4ce00c9d5e.4c35afb0-full.png

alt text http://web14.twitpic.com/img/126705484-0b710f203011f574c598d698fffce8ab.4c35afb0-full.png

---

A workaround would be to set margin-top:-1px to the .dropcap CSS rule ..

must be some discrepancy on the size the text gets rendered..

---

Changing the line-height to 1.8em worked for me. But in general, this problem is very difficult to avoid because fonts are rendered differently across platforms and even across browsers.