在IE中，圆角不是圆角

Question

有任何线索吗？ 尝试了pie.htc，但它无效

.vjs-default-skin .vjs-big-play-button {
  -moz-border-radius: 25px;
  -webkit-border-radius: 25px;
  border-radius: 25px;
  behavior: url(bla bla/PIE.htc);
  position: relative;
}

Answer 1

可能有助于告诉浏览器它正在等待IE9 +代码：

<meta http-equiv="X-UA-Compatible" content="IE=9" />

（见Support for "border-radius" in IE）

Answer 2

我在CSS3Pie上遇到了很多问题。请阅读Known Issues page以获取完整说明，但我通常遇到的问题是使用相对路径，或者在htaccess文件中没有.htc的相应内容类型。

Answer 3

我认为您的“.htc”文件链接存在问题。我遇到了同样的问题并用PIE.htc的正确链接解决了它（我使用PIE.php，因为这对我来说更好 - 这个文件包括PIE.htc，我对.htaccess文件没有问题）。 如果您的圆角在Firefox中工作（例如）并且不能使用IE8及更早版本，那么您必须在PIE文件的链接中遇到问题。您必须从使用圆角的文件链接到htc文件（不是来自CSS文件，而是来自home.php）。

但是没有代码，测试页面或类似的东西是测试它并说“你这里有问题”的问题。

Answer 4

您所看到的是IE 9，渐变背景和CSS3边框的问题。在版本3.2.0中，在默认样式的第329行，您将找到Big Play Button (at start)的引用。 IE 9正在抓住filter声明。

background: #454545;
background: -moz-linear-gradient(top, #454545 0%, #232323 50%, #161616 50%, #3f3f3f 100%);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%,#454545), color-stop(50%,#232323), color-stop(50%,#161616), color-stop(100%,#3f3f3f));
background: -webkit-linear-gradient(top, #454545 0%,#232323 50%,#161616 50%,#3f3f3f 100%);
background: -o-linear-gradient(top, #454545 0%,#232323 50%,#161616 50%,#3f3f3f 100%);
background: -ms-linear-gradient(top, #454545 0%,#232323 50%,#161616 50%,#3f3f3f 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#454545', endColorstr='#3f3f3f',GradientType=0 );
background: linear-gradient(top, #454545 0%,#232323 50%,#161616 50%,#3f3f3f 100%);

如果添加SVG图像渐变并使用条件注释来摆脱过滤器，则可以获得圆角边框和渐变背景。像Colorzilla's Gradient Generator之类的东西可以提供帮助。

CSS：

background: #454545; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzQ1NDU0NSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzIzMjMyMyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iIzE2MTYxNiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMzZjNmM2YiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  #454545 0%, #232323 50%, #161616 51%, #3f3f3f 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#454545), color-stop(50%,#232323), color-stop(51%,#161616), color-stop(100%,#3f3f3f)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #454545 0%,#232323 50%,#161616 51%,#3f3f3f 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #454545 0%,#232323 50%,#161616 51%,#3f3f3f 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #454545 0%,#232323 50%,#161616 51%,#3f3f3f 100%); /* IE10+ */
background: linear-gradient(to bottom,  #454545 0%,#232323 50%,#161616 51%,#3f3f3f 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#454545', endColorstr='#3f3f3f',GradientType=0 ); /* IE6-8 */

HTML中的某个地方：

<!--[if gte IE 9]>
<style type="text/css">
.vjs-default-skin .vjs-big-play-button {
    filter: none;
}
</style>
<![endif]-->

希望有所帮助。

Answer 5

尝试在css文件中声明这个，

溢出：隐藏