Text inside <p> partially hidden in IE/MS Edge with Bootstrap

Question

I have a website built on Bootstrap and it works fine on all browsers. But on IE7 & even in MS Edge, the text in paragraph is partially hidden. Please see the screenshot:

The HTML and CSS are pretty straight forward.

HTML:

<div class="col-md-9 noPad">
  <div class="col-md-12 article-title inside-title">
    <h1 class="title">Privacy Policy</h1>
  </div>
  <div class="col-md-12" id="content">
    <h1 class="title-2">Respecting your privacy</h1>
    <p>
      We respect your personal information, and this Privacy Policy 
explains how we handle it. The policy covers ..............
    </p>
  </div>
</div>

CSS:

.noPad{
    padding: 0;
}

.article-title{
    margin-bottom:24px;
    }

.inside-title{
    border-bottom:2px solid #efefef;
    padding-bottom:20px;
    }

#content{
    text-align: justify;
}

Please help. Thank you.

Answer 1

After a bit of trial and error with the CSS, I found the fix. There was a text shadow added to the page like this:

html, html a {
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
}

I changed the text shadow to

text-shadow: 1px 1px rgba(0,0,0,0.004);

and it fixed the issue! I wonder why the blur-radius property is not working in IE (though it is said that blur-radius should work fine in IE 10 and above, but my IE is 11 and even MS Edge has problem rendering it).

Anyways, thanks for your valuable time in suggesting the fixes.