Question

我在Bootstrap .jumbotron类中使用和覆盖填充时发现了这个错误。

说明为简化问题，请查看此示例以激发respond.js错误：

.shouldBeGreen {
  display: table-cell;
  background-color: gray;
  width: 100px;
  height: 100px;
  text-align: center;
  vertical-align: middle;
}

@media screen and (min-width: 50px) {
  .shouldBeGreen {
    background-color: red;
    font-weight: bold;
  }
}


/* Later in the CSS or in another LESS file... */


/* Will be overridden by respond.js */
.shouldBeGreen {
  background-color: green;
}

在Chrome / FF / Opera / Safari和IE8（仿真与否）中打开以下示例页面以比较问题。

http://krnl.de/resources/respond.js-bug/index.html

行为： Respond.js选择所有相关的媒体查询部分，并将它们放在源CSS文件之后，这将导致覆盖媒体查询后定义的所有关联选择器。

解决方案： 我绞尽脑汁，但此时没有解决方案。

以下是我对Respond.js的错误报告：https://github.com/scottjehl/Respond/issues/225

Answer 1

这不是一个错误，而是浏览器引擎的工作原理！

由于必须首先加载原始CSS，因此任何JS脚本都只能追加样式到现有的样式。因此，所有这些风格都在最后 - 没有别的办法！

编写CSS代码时必须牢记这一点无论如何，在非支持浏览器的“默认”样式之后，将所有媒体查询放在最后是一个很好的设计原则。

Answer 2

快速而肮脏的解决方案应该是：

/* Will be overridden by respond.js */
.shouldBeGreen {
  background-color: green;
  @media screen and (min-width: 50px) {
    background-color: green; //force green for respond.js
  }
}

这样，在正常的CSS样式之后总是应用规则的response.js被迫在运行时应用绿色。

respond.js将优先于后来定义的全局选择器的媒体查询

2 个答案: