0

Firefox 50 and Internet Explorer 11 are using different amounts of leading (space between lines) when rendering the same HTML code. How can I control the leading so that it is the same in both browsers?

HTML

<body> 
<p style="font-family:Arial; font-size:81.25%;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p style="font-family:Arial; font-size:81.25%;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p style="font-family:Arial; font-size:81.25%;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>

Screenshot:

screenshot

2 Answers2

1

Browsers naturally assign different css properties by default. You can clear everything ( or almost everything ) and then reassign it manually. This may also include manually setting the line-height property.

This is known as a "CSS Reset" however, use it sparingly and only use what's needed.

S. Walker
  • 2,129
  • 12
  • 30
1

Are you using Normalize CSS in your style sheet? One thing Normalize does, among many others, is it "corrects the line height in all browsers."

Normalize.css is a modern, HTML5-ready alternative to CSS resetsmakes browsers to render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing. http://necolas.github.io/normalize.css/

You may also need to target IE11 with specific rules in your style sheet: Detecting IE11 using CSS Capability/Feature Detection

Community
  • 1
  • 1
BlueDogRanch
  • 721
  • 1
  • 16
  • 43