Internet Explorer 8 中的 Bootstrap 3 进度条问题答案

【问题标题】：Problems with Bootstrap 3 Progress Bar in Internet Explorer 8Internet Explorer 8 中的 Bootstrap 3 进度条问题
【发布时间】：2014-01-09 02:42:23
【问题描述】：

我在 IE8 中呈现 Bootstrap 3.0.3 进度条时遇到问题。我认为border-radius 不起作用，我不知道为什么。栏是这样的：

我正在使用 CSS3PIE 1.0。

.compatibilidad-IE 在我的 CSS 文件中定义，路径是相对于 de HTML 文件的。我知道这个类运行良好，因为您已将其应用于同一 HTML 中的其他 DOM 元素，并且它们按预期呈现。

这是样式类定义：

.compatibilidad-IE {
    behavior: url(pie/PIE.htc);
}

这是我的 HTML：

<div style="width:200px;">
    <div class="progress compatibilidad-IE" >
        <div class="progress-bar  compatibilidad-IE"  role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
            <span class="sr-only">45% Complete</span>
        </div>
    </div>
</div>

希望你能帮帮我！

谢谢。

【问题讨论】：

border-radius 在 IE 中不起作用。你确定 PIE.htc 在正确的位置吗？
绝对！我在同一个 HTML 中有很多 <input> 和 <button> 在 border-radius 和 linear-gradient 被正确应用！
如果您使用开发人员工具检查进度条，在 .progress 或 .compatilidad-IE 之前还有哪些其他类（或元素）？

标签： html css internet-explorer-8 twitter-bootstrap-3 css3pie

【解决方案1】：

将您的 PIE.htc 放在网页的根目录中。

使用此代码：

.compatibilidad-IE {
    position: relative;
    zoom: 1;
    behavior: url(/PIE.htc);
}

或者，如果您的 js 文件夹中有 PIE.htc，请使用：

behavior: url(/js/PIE.htc);

这是因为你需要一个绝对路径。

【讨论】：