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来解决此问题

IE9 css媒体查询无法正常工作...在其他地方工作正常

2 个答案: