Create a Consistent Cross-Browser Experience

Every browser interprets the HTML specification a little differently. As a result, when identical code is rendered in two different browsers, there are often minor differences in the way the code is rendered.

Take this short bit of code for instance.

<h1>Heading 1</h1>
<p>A short paragraph of text. Just four sentences. Most of the sentences are quite short. Especially this one.</p>
<h2>Heading 2</h2>
    <li>Just a short list</li>
    <li>Three items on this list</li>
    <li>We'll make it an unordered list</li>
<h3>Heading 3</h3>
<p>One final short paragraph of text. Just four sentences. Most of the sentences are quite short. Especially this one.</p>

If we render that code in two different browsers we will see subtle differences. Here’s how Mozilla Firebox and Microsoft Edge render that code.

Comparison of HTML rendered in Mozilla Firefox and Microsoft Edge showing minor differences.

Can you see the subtle differences? Firefox, on the left, adds just a little more margin around each heading element. In addition, the bullet points are a little smaller when rendered in Edge. While these differences are not consequential there are instances where these minor variations between browsers can create problems.

CSS can be used to smooth out these cross-browser compatibility issues. One popular way to do this is to implement a boilerplate CSS document called normalize.css. This freely-available CSS file can be linked to any HTML document to help minimize cross-browser rendering differences.

The easiest way to include normalize.css in your design work is to link to the copy hosted by Google. To do so, just drop this line of code into the head element of an HTML document.

<link rel="stylesheet" src="//" />

Related Posts

Beginner’s Guide to Sass

Have you ever wondered what SASS stands for? Or perhaps you already know what it is but haven’t taken the time to study and use it. Whether…

What Can CSS Do?

A better question might be: “What can’t CSS do?” CSS can be used to turn an HTML document into a professional, polished design. Here are a few…


The second rule that determines which rules are applied to each HTML element is the rule of specificity. CSS rules with more specific selectors will overrule CSS rules with less…

Cascading Inheritance

Why are CSS styles called cascading? When multiple rules are written that conflict with each other, the last rule written will be implemented. In this way, styles cascade…

How CSS Works

When writing CSS, there are many times that rules are written that conflict with each other. For example, when styling headers, all of the following rules may…

Best Practices for Preparing Your Markup for Styling

Now that you know how classes, IDs, and element tags can be used as hooks for CSS rulesets, how can you best implement this knowledge to write…