2

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

描述： 为了简化问题，请查看此示例以引发 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

4

2 回答 2

1

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

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

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

于 2013-09-16T14:15:02.863 回答
0

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

/* 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 被强制在运行时应用绿色。

于 2015-06-01T10:26:19.653 回答