【问题标题】:box-shadow does not work in IE9box-shadow 在 IE9 中不起作用
【发布时间】:2011-11-08 06:43:55
【问题描述】:

我在 IE9 中看到了很多关于 box-shadow 的讨论 - 但是当我尝试它时它不起作用! (当然我并不感到惊讶......叹息)。我误认为这些东西应该在ie9中工作还是mys css错误或者ie9中有模式?这是我使用的 CSS 代码:

.jW{position:absolute;border-radius:8px;box-shadow:4px 4px 24px 4px #000000}

边界半径也是如此。我什至打开了具有这些属性的 CSS3 站点,例如 http://css3please.com/,但它们也不能在 IE9 中运行。其实:牛逼的IE!

【问题讨论】:

  • 检查这个例子可能有帮助stackoverflow.com/questions/5617455/…
  • 做一个最小的测试用例。保存您的页面并继续删除样式规则和页面的某些部分,直到您找到一个可以发布的简单示例,以确定哪些元素交互不良。

标签: css internet-explorer-9


【解决方案1】:

好的 - 找到了问题。首先感谢桑迪普将我提到的部分问题。 IE9 不需要任何 doctype 即可使这些样式生效。导致问题的原因是表格上的“border-collapse:collapse” - 使用 cellspacing=0 然后它可以工作 - 仍然:bugger IE

【讨论】:

    【解决方案2】:

    它应该可以工作(据我所知 - 稍后会运行一些模拟)。与此同时,您可以查看 CSS3 PIE (http://css3pie.com),它增强了 IE 对 CSS3 属性的渲染(不是真正的 IE 渲染,但足够接近)。

    【讨论】:

    • 我在 IE 上做了零年 - 我不支持低于 9 的 IE 版本
    【解决方案3】:

    根据CanIUse.com,IE9 确实支持box-shadow 和border-radius。

    我还没有尝试过使用box-shadow,但我绝对可以保证它可以使用border-radius

    它无法正常工作的最可能原因是您实际上是在 IE8 兼容模式(甚至是 IE7 兼容模式)下运行。这将使 IE9 放弃所有新功能并伪装成旧版本。

    检查这是否是问题的最快方法是按 F12 打开 IE 开发人员工具窗口。这将在右上角显示渲染模式。

    如果它是在兼容模式下渲染,那么您可以在此处更改它。您还可以在代码顶部添加元标记以强制您的网站使用最新的 IE 模式。如果每个网站都出现这种情况,那么您可能需要更改浏览器设置。

    希望对您有所帮助。

    【讨论】:

      【解决方案4】:

      糟糕——对不起,我的测试并不完全正确——似乎 doctype 对于这些东西的工作来说是必不可少的。但随后其他一切都崩溃了。我想下次我先写 IE,然后再写其他的——嘿,这就是微软一直以来的策略!

      【讨论】:

      • 使用这个 - 看起来最好,没有太多的 css 中断:
      【解决方案5】:

      我也遇到了在 IE9 中没有显示框阴影的问题。就我而言,IE9 以兼容模式呈现文档,即使我有一个有效的DOCTYPE。我在本地调试,IE 有一个设置“在兼容性视图中显示 Intranet 站点”,显然是默认启用的。禁用此功能后,一切都按预期工作。这可以在工具 -> 兼容性视图设置下找到。

      【讨论】:

        【解决方案6】:

        box shadow 不起作用的原因是 IE 自动运行在不支持的 quirks 模式下。

        如果您将 Internet Explorer 设置为在 standards mode 中运行,它将正确显示 box-shadow

        您可以通过以下帖子强制 ie 在标准模式下运行:How do I force Internet Explorer to render in Standards Mode and NOT in Quirks?

        如果您无法编辑 http 标头,请使用:<meta http-equiv="X-UA-Compatible" content="IE=edge">

        (或<meta http-equiv="X-UA-Compatible" content="IE=edge" />,如果您使用的是 XHTML)

        如果你这样做应该可以正常工作

        【讨论】:

          猜你喜欢
          • 1970-01-01
          • 2023-01-19
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          相关资源
          最近更新 更多