IE9 css 媒体查询无法正常工作...在其他任何地方都可以正常工作

Question

在 IE9 中查看 fiddle 并尝试调整浏览器大小。如您所见，错误消息无法正常工作。到目前为止，它在 Webkit、Firefox 和 Opera 中运行良好。

这是我当前的代码：

@media screen and (max-width: 480px) {
  #my-form label {
    text-align: left;
    display: block;
    padding-bottom: .3em;
  }
  #my-form .error {
    position: inherit;
    display: inline-block;
    left: 0;
    top: 100%;
    margin-top: 4px;
    width: 200px;
  }
  #my-form .error:after {
    content: "";
    position: absolute;
    top: 0;
    margin-top: -16px;
    left: 50%;
    margin-left: -8px;
    border-style: solid;
    border-width: 8px 8px 8px 8px;
    border-color: transparent transparent #313b53 transparent;
  }
}

可能是什么问题？我似乎无法弄清楚。 IE9 是唯一一个不能按预期工作的...

Answer 1

我修好了。似乎有两件事导致 IE 出现问题。首先，我将 errors 的默认代码移动到另一个 481 及更多的媒体查询中：

@media screen and (min-width: 481px) {
  #my-form .error {
    position: absolute;
    width: 150px;
    right: -171px;
    margin-right: -20px;
    top: 50%;
  }
}

然后我使用浮点数而不是 inline-block。好像IE还是有inline-block的问题：

@media screen and (max-width: 480px) {
  #my-form label {
    text-align: left;
    display: block;
    padding-bottom: .3em;
  }
  #my-form .error {
    float: left; // Here
    clear: left;
    top: 100%;
    margin-top: 4px;
    width: 200px;
  }
}

演示：http://jsfiddle.net/elclanrs/BMz9U

Answer 2

我已通过在标题中添加一个 js 文件 respond.src.js 来解决此问题