<p> 内的文本部分隐藏在具有 Bootstrap 的 IE/MS 边缘中

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 在渲染它时也有问题）。

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

<p> 内的文本部分隐藏在具有 Bootstrap 的 IE/MS 边缘中

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

html

css

internet-explorer-7

twitter-bootstrap