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

Question

我在CodeIgniter中有一个应用程序，我正在使用twitter bootstrap，但我无法在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浏览器。 是的，Pie有一些怪癖，但与其他人相比，它很容易上班。

请记住，自2009年以来，round-corner.htc程序尚未更新，因此它不了解IE9或IE10。 这些浏览器确实支持border-radius，但也会加载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不可能的情况下确实有帮助。

希望有所帮助。