如何在 twitter bootstrap 中获得圆角以在 ie8 中获得圆角？

Question

我在 CodeIgniter 中有一个应用程序，我正在使用 twitter 引导程序，但我无法在 ie8 中获得圆角。

我尝试过 CSS3 派，但没有成功。我尝试将 .htc 文件放在不同的地方（appname/PIE.htc）并放置AddType text/x-component .htc，但也没有成功。

所以我现在尝试改用border-radius.htc。我的CSS和（border-radius.htc）位于appname/application/views/resources/css/：

我的 css 文件如下所示：

@import url(bootstrap.css);

input[type="file"],
input[type="image"],
input,textarea,
input[type="file"]:focus, 
input[type="radio"]:focus,
input[type="checkbox"]:focus,
select:focus,
.input-prepend input,
.input-append input,
.input-prepend select,
.input-append select,
.input-prepend .uneditable-input,
.input-append .uneditable-input,
.input-prepend .add-on,
.input-append .add-on,
.input-prepend .btn,
.input-append .btn ,
.input-prepend .add-on:first-child,
.input-prepend .btn:first-child,
.input-append .add-on:last-child,
.input-append .btn:last-child,
.input-prepend.input-append .add-on:first-child,
.input-prepend.input-append .btn:first-child,
.input-prepend.input-append .add-on:last-child,
.input-prepend.input-append .btn:last-child,
.control-group.warning input:focus,
.control-group.warning select:focus,
.control-group.warning textarea:focus,
.control-group.error input:focus,
.control-group.error select:focus,
.control-group.error textarea:focus,
.control-group.success input:focus,
.control-group.success select:focus,
.control-group.success textarea:focus,
input:focus:required:invalid:focus,
textarea:focus:required:invalid:focus,
select:focus:required:invalid:focus,
.uneditable-input,
.btn,
.btn.active,
.btn:active,
.btn-group > .dropdown-toggle,
.btn-group.open .dropdown-toggle,
.btn-large,
.btn-group > .btn,
.btn-group > .btn:first-child,
.btn-group > .btn:last-child,
.btn-group > .dropdown-toggle,
.btn-group > .btn.large:first-child,
.btn-group > .btn.large:last-child,
.btn-group > .large.dropdown-toggle,
.navbar-inner,
.navbar-search .search-query,
.navbar-search .search-query:focus,
.navbar-search .search-query.focused,
.navbar .btn-navbar,
.navbar .btn-navbar .icon-bar,
.nav-tabs > li > a,
.nav-pills > li > a,
.nav-tabs.nav-stacked > li > a,
.nav-tabs.nav-stacked > li:first-child > a,
.nav-tabs.nav-stacked > li:last-child > a,
.nav-tabs .dropdown-menu,
.nav-pills .dropdown-menu,
.tabs-below > .nav-tabs > li > a,
.tabs-left > .nav-tabs > li > a,
.tabs-right > .nav-tabs > li > a,
.nav-collapse .dropdown-menu,
.nav-collapse .navbar-form,
.nav-collapse .navbar-search,
.nav-collapse .nav > li > a,
.nav-collapse .dropdown-menu a,
.nav-collapse .btn,
.nav-collapse .dropdown-menu,
.navbar-inner,
.navbar-fixed-top .navbar-inner,
.navbar-fixed-bottom .navbar-inner,
.navbar .btn-navbar .icon-bar,
.subnav,
.subnav .nav > li > a,
.subnav .nav > li:first-child > a,
.subnav .nav > li:first-child > a:hover,
.subnav .nav > .active > a,
.subnav .nav > .active > a:hover,
.search-query,
.breadcrumb,
.pagination ul,
.pagination li:first-child a,
.pagination li:last-child a,
.pager a,
.thumbnail,
a.thumbnail:hover,
.progress,
.progress .bar,
.popover-inner,
.popover-title,
.popover-content,
.modal,
.modal-footer,
.dropdown-menu,
.well,
.well-large,
.well-small,
.alert,
.hero-unit,
.tooltip-inner,
.typeahead,
.accordion-group
{
-moz-border-radius:10px;
-webkit-border-radius:10px;
behavior: url(border-radius.htc);
}

这在 ie8 中仍然不起作用。难道我做错了什么？

Answer 1

我要说的第一件事是，将这样一个复杂的 Javascript 效果应用于许多 CSS 选择器将对 IE8 产生显着的性能影响。如果可能的话，我强烈建议你控制你对圆角的渴望。

我不会伤害您的 IE8 用户而不得不牺牲一些令人眼花缭乱的效果，但如果网站的性能明显不佳，他们可能会更痛苦。

但是暂时忽略这一点，让我们看看如何让它发挥作用。

我建议再试一次 CSS3Pie —— 你提到你在它上没有任何成功，但你显然在其他脚本上也没有任何成功。 CSS3Pie 是一款比 IE 中的任何其他各种圆角 hack 都好得多的软件。是的，Pie 有一些怪癖，但与其他人相比，它非常容易上手。

请记住，rounded-corner.htc 程序自 2009 年以来一直没有更新，因此它不了解 IE9 或 IE10。这些浏览器确实支持边界半径，但也会加载一个 htc 文件。我还没有尝试过，但这可能意味着你可能会得到一些不需要的效果。另一方面，CSS3Pie 是最新的，并且知道如何处理各种 IE 版本。

如果您根本没有得到角落效果，最可能的问题是 htc 文件的 URL。您说您已经尝试了一些组合，但是您是否检查过 IE 开发工具以查看它实际访问的文件是什么？按 F12 将其调出，然后刷新您的页面。您应该看到所有正在下载的文件。查找 htc 文件，并查看 IE 尝试下载的 URL。如果它得到一个 404，那么你已经找到了你的问题。我怀疑这是问题所在，但很明显，如果不查看您的网站，我无法判断。

另一种可能是您在浏览器中关闭了 ActiveX。 CSS3Pie 和 rounded-corner.htc 都使用 IE 的 VML 语言来创建它们的效果。但这是一个 activeX 控件，因此禁用了 activeX 的用户将看不到圆角。

如果 HTC 选项所有其他方法都失败了，您可以尝试 CSS3Pie 的纯 Javascript 选项。这允许您运行相同的代码，但作为页面中的常规 Javascript。它不如 HTC 选项那么简洁，但在某些无法使用 HTC 的情况下确实有帮助。

希望对您有所帮助。