html - <p> 中的文本在 IE/MS Edge 中部分隐藏在 Bootstrap 中

Question

我有一个基于 Bootstrap 构建的网站，它在所有浏览器上都运行良好。但在 IE7 甚至 MS Edge 上，段落中的文本部分隐藏。请看截图:

HTML 和 CSS 非常简单。

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;
}

请帮忙。谢谢。

Answer 1

在对 CSS 进行了一些尝试和错误之后，我找到了修复方法。页面上添加了一个文本阴影，如下所示:

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

我把文字阴影改成了

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

它解决了这个问题!我想知道为什么 blur-radius 属性在 IE 中不起作用(尽管据说 blur-radius 在 IE 10 及更高版本中应该可以正常工作，但我的 IE 是 11，甚至 MS Edge 也无法渲染它)。

无论如何，感谢您抽出宝贵时间提出修复建议。