【问题标题】:Rounded corners are not rounded in IE圆角在 IE 中不圆角
【发布时间】:2013-02-21 14:55:42
【问题描述】:

有什么线索吗? 试过 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;
}

【问题讨论】:

  • 最有可能是 CSS3pie 的问题。
  • 顺便说一句,在官网videojs.com上也不起作用:-/

标签: css3pie video.js


【解决方案1】:

告诉浏览器它期待 IE9+ 代码可能会有所帮助:

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

(见Support for "border-radius" in IE

【讨论】:

【解决方案2】:

我在使用 CSS3Pie 时遇到过不少问题。阅读Known Issues page 以获得完整的解释,但我通常遇到的问题是相对路径或在您的 htaccess 文件中没有适当的 .htc 内容类型。

【讨论】:

    【解决方案3】:

    我认为您的“.htc”文件的链接有问题。我有同样的问题,并通过正确链接到 PIE.htc 解决了它(我使用 PIE.php,因为这对我来说更好 - 这个文件包括 PIE.htc,我对 .htaccess 文件没有问题)。 如果您的圆角在 Firefox(例如)中有效,而在 IE8 和更早版本中无效,那么您在 PIE 文件上的链接肯定有问题。您必须从使用圆角的文件(不是从 CSS 文件,而是从例如 home.php)链接到 htc 文件。

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

    【讨论】:

    • 如果我输入完整的网址 (localhost..../.../pie.htc),它应该可以工作,不是吗?
    • Nothing 本地主机你在网络上使用它不仅在本地主机上我认为。我描述了我的情况以及文件和文件夹树:funce(文件夹)、css(文件夹)、img(文件夹)、slash_home.php(文件)-所有内容都与项目名称位于同一个文件夹中。 PIE.php(文件 - 或 PIE.htc,如果你不使用更好的“.php”)我在文件夹“funkce”内,我在 slash_home 中使用 PIE。因此我使用“行为:url(funkce/PIE.php);”因为从文件 slash_home.php 我必须进入文件夹“funkce”并在这里获取文件 PIE.php。
    • "行为:url(funkce/PIE.php);"如果您具有相同的文件树,则在本地主机上工作并且仍在网络上。使用 localhost 你只有绝对链接,它只能在 localhost 上工作,但在 web 上不起作用。
    • 好吧,我知道 localhost 只能在本地工作,而不能在网络上工作......我试图先让它在本地工作,然后我会尝试相对路径。
    • 在我的网页中“行为:url(funkce/PIE.php);”也适用于本地主机和网络。在 localhost 上,您必须具有与 Web 上一样的正确链接。在FF等中。PIE有效吗?如果是,那么您在 PIE 文件的路径中有错误。尝试我的 PIE 文件路径样式(= 从您使用 PIE 的例如 html 文件到 PIE 文件)。
    【解决方案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]-->
    

    希望对您有所帮助。

    【讨论】:

      【解决方案5】:

      尝试在 css 文件中声明,

      溢出:隐藏

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2011-12-29
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2013-03-16
        相关资源
        最近更新 更多