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

时间:2013-03-18 20:58:56

标签: css internet-explorer twitter-bootstrap rounded-corners

我在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。难道我做错了什么?

1 个答案:

答案 0 :(得分:2)

我要说的第一件事就是将这样复杂的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不可能的情况下它确实有用。

希望有所帮助。