--- a/mobile/android/themes/core/aboutReader.css
+++ b/mobile/android/themes/core/aboutReader.css
@@ -69,17 +69,17 @@ body {
   font-size: 26px;
 }
 
 .message {
   margin-top: 40px;
   display: none;
   text-align: center;
   width: 100%;
-  font-size: 0.9rem;
+  font-size: 0.9em;
 }
 
 .header {
   text-align: start;
   display: none;
 }
 
 .domain,
@@ -96,17 +96,17 @@ body {
 
 .domain-border {
   margin-top: 15px;
   border-bottom: 1.5px solid #777777;
   width: 50%;
 }
 
 .header > h1 {
-  font-size: 1.33rem;
+  font-size: 1.33em;
   font-weight: 700;
   line-height: 1.1em;
   width: 100%;
   margin: 0px;
   margin-top: 32px;
   margin-bottom: 16px;
   padding: 0px;
 }
@@ -141,26 +141,26 @@ body {
 
 .dark > .container > .header > .credits {
   color: #aaaaaa;
 }
 
 /* This covers caption, domain, and credits
    texts in the reader UI */
 
-.content .wp-caption-text,
-.content figcaption,
+#moz-reader-content .wp-caption-text,
+#moz-reader-content figcaption,
 .header > .domain,
 .header > .credits {
-  font-size: 0.9rem;
+  font-size: 0.9em;
 }
 
-.content {
+#moz-reader-content {
   display: none;
-  font-size: 1rem;
+  font-size: 1em;
 }
 
 .content a {
   text-decoration: underline !important;
   font-weight: normal;
 }
 
 .content a,
@@ -170,17 +170,17 @@ body {
   color: #00acff !important;
 }
 
 .content * {
   max-width: 100% !important;
   height: auto !important;
 }
 
-.content p {
+#moz-reader-content p {
   line-height: 1.4em !important;
   margin: 0px !important;
   margin-bottom: 20px !important;
 }
 
 /* Covers all images showing edge-to-edge using a 
    an optional caption text */
 .content .wp-caption,
@@ -253,18 +253,18 @@ body {
   border-left-color: #d0d0d0 !important;
 }
 
 .dark > .container > .content blockquote {
   color: #aaaaaa !important;
   border-left-color: #777777 !important;
 }
 
-.content ul,
-.content ol {
+#moz-reader-content ul,
+#moz-reader-content ol {
   margin: 0px !important;
   margin-bottom: 20px !important;
   padding: 0px !important;
   line-height: 1.5em;
 }
 
 .content ul {
   -moz-padding-start: 30px !important;

--- a/toolkit/components/reader/AboutReader.jsm
+++ b/toolkit/components/reader/AboutReader.jsm
@@ -43,17 +43,17 @@ let AboutReader = function(mm, win, arti
   if (articlePromise) {
     this._articlePromise = articlePromise;
   }
 
   this._headerElementRef = Cu.getWeakReference(doc.getElementById("reader-header"));
   this._domainElementRef = Cu.getWeakReference(doc.getElementById("reader-domain"));
   this._titleElementRef = Cu.getWeakReference(doc.getElementById("reader-title"));
   this._creditsElementRef = Cu.getWeakReference(doc.getElementById("reader-credits"));
-  this._contentElementRef = Cu.getWeakReference(doc.getElementById("reader-content"));
+  this._contentElementRef = Cu.getWeakReference(doc.getElementById("moz-reader-content"));
   this._toolbarElementRef = Cu.getWeakReference(doc.getElementById("reader-toolbar"));
   this._messageElementRef = Cu.getWeakReference(doc.getElementById("reader-message"));
 
   this._scrollOffset = win.pageYOffset;
 
   doc.addEventListener("click", this, false);
 
   win.addEventListener("unload", this, false);
@@ -349,23 +349,23 @@ AboutReader.prototype = {
     } else {
       classes.remove("on");
       // When off, action tip is "open".
       this._setButtonTip("list-button", "aboutReader.toolbar.openReadingList");
     }
   },
 
   _setFontSize: function Reader_setFontSize(newFontSize) {
-    let htmlClasses = this._doc.documentElement.classList;
+    let containerClasses = this._doc.getElementById("container").classList;
 
     if (this._fontSize > 0)
-      htmlClasses.remove("font-size" + this._fontSize);
+      containerClasses.remove("font-size" + this._fontSize);
 
     this._fontSize = newFontSize;
-    htmlClasses.add("font-size" + this._fontSize);
+    containerClasses.add("font-size" + this._fontSize);
 
     this._mm.sendAsyncMessage("Reader:SetIntPref", {
       name: "reader.font_size",
       value: this._fontSize
     });
   },
 
   _setupFontSizeButtons: function() {

--- a/toolkit/components/reader/content/aboutReader.html
+++ b/toolkit/components/reader/content/aboutReader.html
@@ -14,17 +14,17 @@
   <div id="container" class="container">
     <div id="reader-header" class="header">
       <a id="reader-domain" class="domain"></a>
       <div class="domain-border"></div>
       <h1 id="reader-title"></h1>
       <div id="reader-credits" class="credits"></div>
     </div>
 
-    <div id="reader-content" class="content">
+    <div id="moz-reader-content" class="content">
     </div>
 
     <div id="reader-message" class="message">
     </div>
 
     <div id="reader-footer" class="footer">
       <button id="remove-button" class="button remove-button"/>
     </div>

--- a/toolkit/themes/windows/global/aboutReader.css
+++ b/toolkit/themes/windows/global/aboutReader.css
@@ -88,29 +88,29 @@ body.loaded {
 
 /* Loading/error message */
 
 .message {
   margin-top: 40px;
   display: none;
   text-align: center;
   width: 100%;
-  font-size: 0.9rem;
+  font-size: 0.9em;
 }
 
 /* Header */
 
 .header {
   text-align: start;
   display: none;
 }
 
 .domain {
-  font-size: 0.9rem;
-  line-height: 1.33rem;
+  font-size: 0.9em;
+  line-height: 1.48em;
   padding-bottom: 4px;
   font-family: "Fira Sans", Helvetica, Arial, sans-serif;
   text-decoration: none;
   border-bottom: 1px solid;
   color: #0095dd;
 }
 
 .light > .container > .header > .domain,
@@ -118,58 +118,58 @@ body.loaded {
   border-bottom-color: #333333;
 }
 
 .dark > .container > .header > .domain {
   border-bottom-color: #eeeeee;
 }
 
 .header > h1 {
-  font-size: 1.33rem;
-  line-height: 1.66rem;
+  font-size: 1.33em;
+  line-height: 1.25em;
   width: 100%;
   margin: 30px 0;
   padding: 0;
 }
 
 .header > .credits {
-  font-size: 0.9rem;
-  line-height: 1.33rem;
+  font-size: 0.9em;
+  line-height: 1.48em;
   margin: 0 0 30px 0;
   padding: 0;
   font-style: italic;
 }
 
 /* Content */
 
-.content {
+#moz-reader-content {
   display: none;
-  font-size: 1rem;
-  line-height: 1.6rem;
+  font-size: 1em;
+  line-height: 1.6em;
 }
 
 .content h1,
 .content h2,
 .content h3 {
   font-weight: bold;
 }
 
-.content h1 {
-  font-size: 1.33rem;
-  line-height: 1.66rem;
+#moz-reader-content h1 {
+  font-size: 1.33em;
+  line-height: 1.25em;
 }
 
-.content h2 {
-  font-size: 1.1rem;
-  line-height: 1.66rem;
+#moz-reader-content h2 {
+  font-size: 1.1em;
+  line-height: 1.51em;
 }
 
-.content h3 {
-  font-size: 1rem;
-  line-height: 1.66rem;
+#moz-reader-content h3 {
+  font-size: 1em;
+  line-height: 1.66em;
 }
 
 .content a {
   text-decoration: underline;
   font-weight: normal;
 }
 
 .content a,
@@ -203,21 +203,21 @@ body.loaded {
   display: block;
 }
 
 .content img[moz-reader-center] {
   margin-left: auto;
   margin-right: auto;
 }
 
-.content .caption,
-.content .wp-caption-text,
-.content figcaption {
-  font-size: 0.9rem;
-  line-height: 1.33rem;
+#moz-reader-content .caption,
+#moz-reader-content .wp-caption-text,
+#moz-reader-content figcaption {
+  font-size: 0.9em;
+  line-height: 1.48em;
   font-style: italic;
 }
 
 .content code,
 .content pre {
   white-space: pre-wrap;
 }