title: Gap caused by border in safari in IOS
body: <p>Something weird. </p>
  
  <p>A div inside a parent div. Parent div has a border. Then in safari in ios devices. There's a small gap between the border and the child div. Wonder if anyone knows why is this and how to fix it? Thank you very much!</p>
  
  <p>Here is the code and a screenshot:</p>
  
  <pre><code>&lt;head&gt;
      &lt;style&gt;
          .laoda {
              border-top: solid 1em #c53243;
              position: fixed;
              left: 0;
              right: 0;
              top: 0;
          }
  
          .laoer {
              background: #c53243;
              height: 5.7em;
          }
      &lt;/style&gt;
  
  
  &lt;/head&gt;
  &lt;div class="laoda"&gt;
      &lt;div class="laoer"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Can't post image yet. Here is a screenshot to the image: <a href="http://s1.tt.tl/image.png" rel="nofollow">http://s1.tt.tl/image.png</a></p>
  
  <p>And here is the web page with the code: <a href="http://s1.tt.tl/t.html" rel="nofollow">http://s1.tt.tl/t.html</a></p>