0

在 IE9 中查看这个小提琴并尝试调整浏览器的大小。如您所见，错误消息无法正常工作。到目前为止，它在 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 是唯一一个不能按预期工作的...

4

2 回答 2

2

我修好了它。似乎有两件事导致 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

于 2012-04-27T07:34:02.913 回答
0

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

于 2013-03-06T10:37:23.703 回答