title: Zoom body browser
body: <p>I would add my site buttons A + and A-to zoom.
  I wish that all the body is grossise
  So I created this code</p>
  
  <pre><code>&lt;html&gt;
  &lt;body&gt;
      &lt;style&gt;
      .container{width: 800px;background: #000;}
      p{color:#fff;}
      a { color: #FFCC00;}
      &lt;/style&gt;
      &lt;div class="container"&gt;
          &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum, qui, sunt, totam quaerat repudiandae dignissimos maxime et perspiciatis aperiam doloremque eaque eum explicabo ullam deleniti sed adipisci obcaecati fuga similique.&lt;/p&gt;
  &lt;script type="text/javascript"&gt;
  function ZoomScreen100() {
  document.body.style.zoom="100%"
   }
  function ZoomScreen200() {
  document.body.style.zoom="200%"
   } 
  function ZoomScreen300() {
  document.body.style.zoom="300%"
  }
  function ZoomScreen400() {
  document.body.style.zoom="400%"
  document.body.style.zoom="400%"
  }
  &lt;/script&gt;
  &lt;a href="#" onclick="ZoomScreen100()"&gt;A+&lt;/a&gt;
  &lt;a href="#" onclick="ZoomScreen200()"&gt;A+&lt;/a&gt;
  &lt;a href="#" onclick="ZoomScreen300()"&gt;A+&lt;/a&gt;
  &lt;a href="#" onclick="ZoomScreen400()"&gt;A+&lt;/a&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>
  It works on Chrome, Internet Explorer, Safari but not on Firefox and Opera. Why?</p>