Using svg on webpage results in weird css rendering in webkit browsers

Question

I'm running into a weird glitch which only seems to happen in chrome and safari. It's hard to explain why this happens with sample code, but I'll try to illustrate what I'm doing with code, while providing a link to the actual page below.

First of all, I have an unordered list displayed inline-block, so it can be justified just like text. Each list item contains an svg in an image tag and a paragraph with a short description, both wrapped in a single anchor tag. Nothing special i guess, but here's the catch: in chrome and safari the browser renders a 1px by approximately 15px blue/blackish line between the paragraph and the image, and I have no idea why this is happening. Here's the code:

<div class="wrapper">
  <div class="justified-list home-icons"> 
        <ul>
          <li>
            <a href="#">
              <img src="http://voctel.wearebold.nl/wp-content/uploads/2015/02/company-building.svg" />
              <br/>
              <p>Description</p>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="http://voctel.wearebold.nl/wp-content/uploads/2015/02/company-building.svg" />
              <br/>
              <p>Description</p>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="http://voctel.wearebold.nl/wp-content/uploads/2015/02/company-building.svg" />
              <br/>
              <p>Description</p>
            </a>
          </li>
        </ul>
        <span class="stretcher"></span>
      </div><!-- .justified-list -->
</div><!-- .wrapper -->

and here is the css (I'm using scss):

.wrapper {
  width: 100%;
}
.justified-list {
    width: 100%;
    text-align: justify;

    * {
        display: inline;
    }

    li {
        display: inline-block;
        vertical-align: top;
    }

    .stretcher {
        display: inline-block;
        position: relative;
        width: 100%;
        height: 0;
    }
}

Also, a codepen is provided here:

http://codepen.io/smelly586/pen/NPVVYd

If anyone has a clue on what's going on, or even better: has a possible fix for this, you have my gratitude.

Answer 1

Set your font-size on the element to 0. What you're seeing is the underline in the anchor element for whitespace in your HTML.

You could turn off the text-decoration: underline; that the browser renders by default for anchors, but let's assume that's not what you want to do.

Instead, the element with text will need to be reset to document root font-size (or whatever you want) using something like p { font-size: 1rem; }.

Example Codepen

So, accordingly, the SCSS/LESS would be:

.justified-list {
    width: 100%;
    text-align: justify;

    * {
        display: inline;
    }

    li {
        display: inline-block;
        vertical-align: top;
            
           a {
             font-size: 0;

             p { font-size: 1rem; }
           }
    }

    .stretcher {
        display: inline-block;
        position: relative;
        width: 100%;
        height: 0;
    }
}