0

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

我试过 CSS3 pie 没有成功。我尝试将 .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中仍然不起作用。难道我做错了什么?

4

1 回答 1

2

我要说的第一件事是,将这样一个复杂的 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 的情况下确实有帮助。

希望有帮助。

于 2013-03-19T00:08:28.793 回答